Create Dropdown list from API Query

问题

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

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

An XML is produced for each user looking like

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

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

回答1:

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.

Shown is an example of code similar to what I ended up using (below), along with the test XML file shown here

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();

with

    firstnamesarry[i] = $(this).find('FirstName').text();
    lastnamesarry[i] = $(this).find('LastName').text();
    i = i+1;

and replaced the "select.append" First & Last Names with

    firstnamearry[i] & lastnamearry[i]

To view a working example, check out the jsfiddle here

来源：https://stackoverflow.com/questions/39862356/create-dropdown-list-from-api-query

标签

javascript

arrays

xml

api

dropdown