从 API 查询创建下拉列表

Question

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

发出 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 "columns"，其中包含所有显示的信息，每个用户占一行。 b

Answer 1

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

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

这是如何工作的基本解释，它使用代理获取 XML 文件并将其存储为 "xml"，找到 "function(xml)"。然后搜索 XML 文档，每个以 "User" 开头的部分都从中获取 "FirstName" 和 "LastName" 数据，并附加到 HTML 部分的下拉列表中命名为 "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>

请注意，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

从 API 查询创建下拉列表

Create Dropdown list from API Query

javascript

xml

arrays

api

dropdown