通过API查询创建下拉列表 [英] Create Dropdown list from API Query

问题描述

试图创建一个脚本，该脚本将从API请求的XML文档中提取信息并将其放入2D数组中.

Attempting to create a script that will pull information from an API requested XML document and put it into a 2D array.

发出获取"请求后 https://api.example .com/v1.svc/users?apikey = MY-KEY& source = MY-APP& limit = 1000

为每个看起来像

<User>
  <Id>Rdh9Rsi3k4U1</Id>
  <UserName>[e-mail]</UserName>
  <FirstName>First</FirstName>
  <LastName>Last</LastName>
  <Active>true</Active>
  <Email>[e-mail]</Email>
  <AccessLevel>Learner</AccessLevel>
</User>

每个用户都具有彼此堆叠的相似外观输出.如何将其擦洗成阵列?例如，第一个数组将具有7个列"，其中包含所有显示的信息，每个用户都有一行. b

Each user has a similar looking output stacked on top of each other. How could this be scrubbed into an array? Example, the first array would have 7 "columns" with all shown information with each user having a row. b

推荐答案

因此，我为将来寻求此类问题答案的任何人提供了解决方案.基本上，我发现我尝试访问的API(实际上不是示例中所示的"citrowske.com")不允许使用CORS或jsonp，这使我只能使用代理.

So I figured it out for anyone looking for an answer to this type of question in the future. Basically, I found out that the API I was trying to reach (not actually "citrowske.com" as shown in the example) did not allow for CORS or jsonp which left me with the only option of using a Proxy.

所示为类似于我最终使用的代码示例(如下)，以及所示的测试XML文件这里

Shown is an example of code similar to what I ended up using (below), along with the test XML file shown here

对此工作原理的基本解释，它使用代理获取XML文件并将其存储为在"function(xml)"中找到的"xml".然后搜索XML doc，以"User"开头的每个部分都从中提取"FirstName"和"LastName"数据，并附加到名为"yourdropdownbox"的HTML部分中的下拉列表中.

A basic explanation of how this works, it uses the proxy to get the XML file and stores it as "xml" found as "function(xml)". Then the XML doc is searched and each section that starts with "User" gets the "FirstName" and "LastName" data pulled from it and appended to dropdown in the HTML section named "yourdropdownbox".

$.ajaxPrefilter( function (options) {
  if (options.crossDomain && jQuery.support.cors) {
    var http = (window.location.protocol === 'http:' ? 'http:' : 'https:');
    options.url = http + '//cors-anywhere.herokuapp.com/' + options.url;
    //options.url = "http://cors.corsproxy.io/url=" + options.url;
  }
});

$.get(
    'http://citrowske.com/xml.xml',
    function (xml) {
        //console.log("> ", xml);
        //$("#viewer").html(xml);
        
////////////////////////////////////
var select = $('#yourdropdownbox');
		select.append('<option value="">Select a User</option>');				
		$(xml).find('User').each(function(){											
		var FirstNames = $(this).find('FirstName').text();
	  var LastNames = $(this).find('LastName').text();
    
		select.append("<option value='"+ FirstNames +"'>"+FirstNames+" "+LastNames+"</option>");
	  });
	}
////////////////////////////////////

);

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<select id="yourdropdownbox">

</select>

请注意，代理服务器并不十分安全，因此请注意使用它的目的.

As a note, Proxy's are not known for being extremely secure, so watch out what you use this for.

此外，如果我想将数据转换为数组，而不是每次添加时都将其追加

Also, if I wanted to turn the data into an array instead of appending it each time I could have added

    var firstnamesarray = ["0"];
    var lastnamesarry = ["0"];
    var i = 0;

在正斜杠的第一行上方，然后替换:

Above the top row of forward-slashes and then replaced:

    var FirstNames = $(this).find('FirstName').text();
    var LastNames = $(this).find('LastName').text();

与

    firstnamesarry[i] = $(this).find('FirstName').text();
    lastnamesarry[i] = $(this).find('LastName').text();
    i = i+1;

并替换为"select.append"的第一项&

and replaced the "select.append" First & Last Names with

    firstnamearry[i] & lastnamearry[i]

要查看工作示例，请在此处

To view a working example, check out the jsfiddle here

这篇关于通过API查询创建下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！