从API查询中创建下拉列表

Create Dropdown list from API Query

本文关键字：创建 下拉列表 查询 API      更新时间：2023-09-26

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

在发出Get请求时https://api.example.com/v1.svc/users?apikey=MY-KEY& = MY-APP&amp来源;限制= 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

所以我为将来寻找这类问题答案的人想出了答案。基本上，我发现我试图访问的API(实际上不是示例中所示的"citrowske.com")不允许CORS或jsonp，这使我只能选择使用代理。

所示的代码示例与我最终使用的代码类似(如下)，以及此处显示的测试XML文件

这是如何工作的基本解释，它使用代理获取XML文件并将其存储为"XML"，发现为"函数(XML)"。然后搜索XML文档，并从"User"开始的每个部分获取"FirstName"answers"LastName"数据，并将其添加到名为"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>

值得注意的是，代理并不以非常安全而闻名，所以要注意使用它的目的。

另外，如果我想将数据转换成数组而不是每次都附加它，我可以添加

    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。附加"第一个&带有

的姓氏
    firstnamearry[i] & lastnamearry[i]

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

相关文章：