There are two simple ways you can read data from an external JSON file and convert the data to an Array. I am sharing two examples here. The first example is in JavaScript that uses the XMLHttpRequest Object and the second example uses jQuery getJSON() method. So, let’s get straight to the examples.

Convert JSON file to Array using XMLHttpRequest Object in JavaScript

One of the key features of Ajax is the XMLHttpRequest object. In one of my previous posts, I have explained in detail and I have shown how you can using the object in JavaScript.

I am using the same object now in my example here to show you how to read an external JSON file and convert the data into an array.

<html> <head> <title>Convert JSON file to Array using JavaScript</title> </head> <body> <p>Showing data extracted from an External JSON file using XMLHttpRequest Object JavaScript</p> <p id="birds" style="font:12px Verdana;"></p> </body> <script> var oXHR = window. XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); function reportStatus() { if (oXHR. readyState == 4) showTheList(this. responseText ); } oXHR.onreadystatechange = reportStatus; oXHR.open(" GET ", "../../library/sample.json", true); oXHR.send(); function showTheList (json) { var arrItems = []; arrItems = JSON. parse (json); for (i = 0; i <= arrItems.length - 1; i++) { var p = document.getElementById('birds'); p.innerHTML = p.innerHTML + ' <br > ' + arrItems[i].Name; } } </script> </html> Try it

If you want to stick to plain JavaScript to read and convert JSON file to an array, then the method shown in the above example is useful.



All modern browsers support the XMLHttpRequest object. Therefore, you can use the object and properties without any hesitation.

You can read more about XMLHttpRequst object and its properties .

Convert JSON file to Array using jQuery .getJSON() Method

Now, let’s see how you can accomplish the same task, that is, converting data in JSON file to an array, using jQuery.

The jQuery .getJSON() method is ideal for this kind of task. That’s what I am using here in my second example.

The .getJSON() method uses an Ajax HTTP GET request to read an external JSON file. You’ll have to provide the URL of the JSON file to the method.

Once the file is loaded, I’ll populating an array with the data using the push() method.

<html> <head> <title>Convert JSON file to Array using jQuery</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> </head> <body> <p>Converting JSON file to an array and populating a SELECT dropdown list with the data using jQuery!</p> <select id="birds"> <option value="">-- Select --</option> </select> </body> <script> $(document).ready(function () { $. getJSON ('../../library/sample.json', function (data) { if (data.length > 0) { var arrItems = []; $. each (data, function (index, value) { arrItems. push (value); }); var ele = document. getElementById ('birds'); $. each (arrItems, function (i, v) { ele.innerHTML = ele.innerHTML + '<option value="' + arrItems [i]['ID'] + '">' + arrItems [i]['Name'] + '</option>'; }); } }); }); </script> </html> Try it

that shows and explains (in detail) how to populate a <select> dropdown list with JSON data in JavaScript.

That’s it. Thanks for reading. ☺

← PreviousNext →