How to convert data in JSON file to an Array using JavaScript or jQuery

javascript jquery

← PrevNext →

Tools you can use

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 about XMLHttpRequest object properties and I have shown how you can read Xml data 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)                   // Request completed.
            showTheList(this.responseText);         // All set. Now show the data.
    }

    oXHR.onreadystatechange = reportStatus;
    oXHR.open("GET", "../../library/sample.json", true);          // true = ASYNCHRONOUS REQUEST (DESIRABLE), false = SYNCHRONOUS REQUEST.
    oXHR.send();

    function showTheList(json) {
        var arrItems = [];
        arrItems = JSON.parse(json); 	// Fill JSON data to an array.

        // Now you can use the data in the array for different purpose.
        // I am simply showing the data on my web page using the <p> element.
        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 here.

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 = [];              // The array to store JSON data.

                $.each(data, function (index, value) {
                    arrItems.push(value);       // Push the value inside the array.
                });

                // Use the data in the array in whatever way you want it.
                // I am using the array to populate a <select> dropdown list.

                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

Here’s another example 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 →