How to parse nested JSON in Javascript?
<p>I am trying to parse and show JSON data (product catalog) using XMLHttpRequest method. I am able to display the brands and their names, but not able to showcase list of products progmatically.</p>

<p>Here is the sample JSON request:</p>

<pre><code>   {
    "products": {
        "laptop": [{
            "brand": "sony",
            "price": "$1000"
        }, {
            "brand": "acer",
            "price": "$400"
        }],
        "cellphone": [{
            "brand": "iphone",
            "price": "$800"
        }, {
            "brand": "htc",
            "price": "$500"
        }],
        "tablets": [{
            "brand": "iPad",
            "price": "$800"
        }, {
            "brand": "htc-tab",
            "price": "$500"
        }]
    }
}
</code></pre>

<p>Right now I am using following code to show data in tabluar form:</p>

<pre><code> function loadJSON() {

        var data_file = "http://localhost/AJAX/productcatalog.json";

        var http_request = new XMLHttpRequest();

        http_request.onreadystatechange = function () {

            if ((http_request.readyState == 4) &amp;&amp; (http_request.status == 200)) {

                // Javascript function JSON.parse to parse JSON data
                var jsonObj = JSON.parse(http_request.responseText);
                data = '&lt;table border="2"&gt;&lt;tr&gt;&lt;td&gt;Type&lt;/td&gt;&lt;td&gt;Brand&lt;/td&gt;&lt;td&gt;Price&lt;/td&gt;&lt;/tr&gt;';
                var i = 0;
                debugger;
                for (i = 0; i &lt; jsonObj["products"].laptop.length; i++)
                {

                    obj = jsonObj["products"].laptop[i];

                    data = data + '&lt;tr&gt;&lt;td&gt;laptop&lt;/td&gt;&lt;td&gt;' + obj.brand + '&lt;/td&gt;&lt;td&gt;' + obj.price + '&lt;/td&gt;&lt;/tr&gt;';
                }
                for (i = 0; i &lt; jsonObj["products"].cellphone.length; i++)
                {

                    obj = jsonObj["products"].cellphone[i];

                    data = data + '&lt;tr&gt;&lt;td&gt;laptop&lt;/td&gt;&lt;td&gt;' + obj.brand + '&lt;/td&gt;&lt;td&gt;' + obj.price + '&lt;/td&gt;&lt;/tr&gt;';
                }

                for (i = 0; i &lt; jsonObj["products"].tablets.length; i++)
                {

                    obj = jsonObj["products"].tablets[i];

                    data = data + '&lt;tr&gt;&lt;td&gt;laptop&lt;/td&gt;&lt;td&gt;' + obj.brand + '&lt;/td&gt;&lt;td&gt;' + obj.price + '&lt;/td&gt;&lt;/tr&gt;';
                }

                data += '&lt;/table&gt;';

                document.getElementById("demo").innerHTML = data;


            }
        }

        http_request.open("GET", data_file, true);
        http_request.send();
    }
</code></pre>

<p><strong>Question</strong> What is the way to fetch product list , i.e. products, cellphone and tablets ? Right now I have hardcoded that in order to fetch complete list of brands. Please advice. (I want to use plain javascript and not jquery)</p>

<p>Thanks!</p>