title: How to parse nested JSON in Javascript?
body: <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>