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

问题描述

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

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

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

Upon making the Get request https://api.example.com/v1.svc/users?apikey=MY-KEY&source=MY-APP&limit=1000

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

An XML is produced for each user looking like

<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 个列"，其中包含所有显示的信息，每个用户都有一行.

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 文件并将其存储为xml"，发现为function(xml)".然后搜索 XML 文档，每个以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]

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

To view a working example, check out the jsfiddle here

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