從API查詢創建下拉列表

試圖創建一個腳本，該腳本將從API請求的XML文檔中提取信息並將其放入二維數組中。從API查詢創建下拉列表

在製做Get請求 https://api.example.com/v1.svc/users?apikey=MY-KEY&source=MY-APP&limit=1000

的XML爲每個用戶產生看起來像

<User> 
    <Id>Rdh9Rsi3k4U1</Id> 
    <UserName>[email protected]</UserName> 
    <FirstName>First</FirstName> 
    <LastName>Last</LastName> 
    <Active>true</Active> 
    <Email>[email protected]</Email> 
    <AccessLevel>Learner</AccessLevel> 
</User>

每個用戶具有堆疊在彼此的頂部上的外觀類似的輸出。這怎麼可能被清理成一個數組？例如，第一個數組將具有7個「列」，其中每個用戶都有一行顯示的信息。 b

來源

2016-10-04 BrettC

因此，我想出了任何人在未來尋找這種類型的問題的答案。基本上，我發現我嘗試訪問的API（實際上並不是「citrowske.com」）不允許使用CORS或jsonp，這使我無法使用代理服務器。

顯示的是類似於我最終使用（如下圖），以顯示的測試XML文件一起here

是如何工作的一個基本的解釋，它使用代理來獲取XML文件的代碼示例並將其作爲「xml」存儲爲「function（xml）」。然後搜索XML文檔，以「User」開頭的每個部分都會獲取從其中拉取的「FirstName」和「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'); 
 
\t \t select.append('<option value="">Select a User</option>'); \t \t \t \t 
 
\t \t $(xml).find('User').each(function(){ \t \t \t \t \t \t \t \t \t \t \t 
 
\t \t var FirstNames = $(this).find('FirstName').text(); 
 
\t var LastNames = $(this).find('LastName').text(); 
 
    
 
\t \t select.append("<option value='"+ FirstNames +"'>"+FirstNames+" "+LastNames+"</option>"); 
 
\t }); 
 
\t } 
 
//////////////////////////////////// 
 

 
);

<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.append」第一&拉第一名稱與

firstnamearry[i] & lastnamearry[i]

要查看工作示例中，檢查了的jsfiddle here

來源

2016-10-21 21:36:36 BrettC

從API查詢創建下拉列表

回答

相關問題