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 <a href="https://api.example.com/v1.svc/users?apikey=MY-KEY&source=MY-APP&limit=1000" rel="nofollow">https://api.example.com/v1.svc/users?apikey=MY-KEY&source=MY-APP&limit=1000</a>

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


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 <a href="http://citrowske.com/xml.xml" rel="nofollow">here</a>

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

<pre class="snippet-code-js lang-js prettyprint-override">$.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>"); }); } //////////////////////////////////// ); <pre class="snippet-code-html lang-html prettyprint-override"><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;

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

firstnamearry[i] & lastnamearry[i]

To view a working example, check out the jsfiddle <a href="https://jsfiddle.net/65n79t6d/" rel="nofollow">here</a>


  • How to show/hide elements using PHP and how to send user to another page
  • Indirect parameter substitution in shell script
  • Contact form problem - I do receive messages, but no contents (blank page)
  • Google Calendar Api is not showing event list
  • Encrypting credit card details using AngularJS in Braintree
  • How to access recipient on sent messages page with mailboxer
  • Dynamically set LESS variables from user settings
  • testing a POST using phpunit in laravel 4
  • How to create two column output from a single column
  • How can I get the choice “H2” back in the H2 consol?
  • R convert summary result (statistics with all dataframe columns) into dataframe
  • Approximate Order-Preserving Huffman Code
  • 550 Access denied - Invalid HELO name
  • Login not working in Firefox in Meteor
  • converting text file into xml using php?
  • Breaking out column by groups in Pandas
  • Unable to get column index with table.getColumn method using custom table Model
  • SharedPreferences or SQLite Database?
  • How do I access an unhandled exception in an MVC Error view?
  • Email verification using google app script and google forms
  • Algorithm for a smudge tool?
  • Xamarin Forms - UWP Fonts
  • Email format validation in mvc3 view
  • swift auto completion not working in Xcode6-Beta
  • Can Jackson SerializationFeature be overridden per field or class?
  • sending/ receiving email in Java
  • Arrow is showed instead of the material design version hamburger icon. Why doesn't syncState in
  • Jquery - Jquery Wysiwyg return html as a string
  • Unanticipated behavior
  • Arrays break string types in Julia
  • using conditional logic : check if record exists; if it does, update it, if not, create it
  • Android Studio and gradle
  • WPF Applying a trigger on binding failure
  • Why can't I rebase on to an ancestor of source changesets if on a different branch?
  • How do I configure my settings file to work with unit tests?
  • Java static initializers and reflection
  • IndexOutOfRangeException on multidimensional array despite using GetLength check
  • Can't mass-assign protected attributes when import data from csv file
  • Binding checkboxes to object values in AngularJs
  • Unable to use reactive element in my shiny app