从 API 查询创建下拉列表答案

【问题标题】：Create Dropdown list from API Query从 API 查询创建下拉列表
【发布时间】：2017-02-13 05:07:03
【问题描述】：

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

在发出 Get 请求时 https://api.example.com/v1.svc/users?apikey=MY-KEY&source=MY-APP&limit=1000

为每个看起来像的用户生成一个 XML

<User>
  <Id>Rdh9Rsi3k4U1</Id>
  <UserName>firstlast@email.com</UserName>
  <FirstName>First</FirstName>
  <LastName>Last</LastName>
  <Active>true</Active>
  <Email>firstlast@email.com</Email>
  <AccessLevel>Learner</AccessLevel>
</User>

每个用户都有相似的输出堆叠在一起。这怎么可能被清理成一个数组？例如，第一个数组将有 7 个“列”，其中包含所有显示的信息，每个用户都有一行。 b

【问题讨论】：

标签： javascript arrays xml api dropdown

【解决方案1】：

因此，我为将来寻找此类问题答案的任何人想通了。基本上，我发现我试图访问的 API（实际上不是示例中所示的“citrowske.com”）不允许使用 CORS 或 jsonp，这让我只能选择使用代理。

显示的是类似于我最终使用的代码示例（如下），以及显示的测试 XML 文件 here

这是如何工作的基本解释，它使用代理获取 XML 文件并将其存储为“xml”，找到为“function(xml)”。然后搜索 XML 文档，每个以“用户”开头的部分获取从中提取的“名字”和“姓氏”数据，并附加到名为“yourdropdownbox”的 HTML 部分的下拉列表中。

$.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>

请注意，Proxy 的安全性并不高，因此请注意您的用途。

另外，如果我想把数据变成一个数组，而不是每次我都可以添加时追加它

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

顶行正斜杠上方，然后替换：

    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”名字和姓氏替换为

    firstnamearry[i] & lastnamearry[i]

要查看一个工作示例，请查看 jsfiddle here

【讨论】：