How to parse nested JSON in Javascript?

Question

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.

Here is the sample JSON request:

   {
    "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"
        }]
    }
}

Right now I am using following code to show data in tabluar form:

 function loadJSON() {

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

        var http_request = new XMLHttpRequest();

        http_request.onreadystatechange = function () {

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

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

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

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

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

                    data = data + '<tr><td>laptop</td><td>' + obj.brand + '</td><td>' + obj.price + '</td></tr>';
                }

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

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

                    data = data + '<tr><td>laptop</td><td>' + obj.brand + '</td><td>' + obj.price + '</td></tr>';
                }

                data += '</table>';

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


            }
        }

        http_request.open("GET", data_file, true);
        http_request.send();
    }

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

Thanks!

Answer 1

It sounds like what you're missing is the "How do I iterate over an object when I don't know all the keys".

An object is a set of key, value pairs. You can use for/in syntax: for( var <key> in <object> ){} to get each key.

For your use case it might be something like:

var products = jsonObject['products'];
for( var productName in products ){
  //productName would be "laptop", "cellphone", etc.
  //products[productName] would be an array of brand/price objects
  var product = products[productName];
  for( var i=0; i<product.length; i++ ){
    //product[i].brand
    //product[i].price
  }
}

In practice, I might use something a little less verbose, but this makes it easier to understand what is going on.