Trouble parsing Json response

Question

I am trying to parse a JSON file that contains product categories, then the products within those categories, and display them in a div.

My problem: while I can get the categories, I don't know how to ask for the products (and have them appear under the categories).

My script:

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

<script>
  $.getJSON('https://example.com/GetProductList/', function(data) {
        var output="<ul>";
        for (var i in data.Categories) {
            output+="<li>" + data.Categories[i].Category + "</li>";
        }
        output+="</ul>";
        document.getElementById("testdiv").innerHTML=output;
  });
</script>

The JSON I'm trying to parse:

{
  "List": "GetProductList",
  "Categories": [{
    "Category": "Featured",
    "Products": [{
      "product_id": "2",
      "short_description": "short desc 2",
      "cost": "20"
    }]
  }, {
    "Category": "Automotive",
    "Products": ""
  }, {
    "Category": "Electronics",
    "Products": ""
  }, {
    "Category": "Sporting Goods",
    "Products": [{
      "product_id": "2",
      "short_description": "short desc 2",
      "cost": "20"
    }, {
      "product_id": "3",
      "short_description": "short desc 3",
      "cost": "30"
    }]
  }, {
    "Category": "Housewares",
    "Products": [{
      "product_id": "1",
      "short_description": "short desc",
      "cost": "10"
    }]
  }, ]
}

I'm able to get the categories and show them in the div (testdiv), but how do I get the Product info as well?

Answer 1

The most straight forward way would be to make an inner loop and access each property individually

for (var i in data.Categories) {
   output += "<li>" + data.Categories[i].Category + "</li>";
   output += "<ul>";
   for (var j in data.Categories[i].Products) {
     output += "<li>" + data.Categories[i].Products[j].cost + "</li>";
     output += "<li>" + data.Categories[i].Products[j].product_id + "</li>";
     output += "<li>" + data.Categories[i].Products[j].short_description + "</li>";
   }
   output += "</ul>";
 }

var data = {
   "List": "GetProductList",
   "Categories": [{
     "Category": "Featured",
     "Products": [{
       "product_id": "2",
       "short_description": "short desc 2",
       "cost": "20"
     }]
   }, {
     "Category": "Automotive",
     "Products": ""
   }, {
     "Category": "Electronics",
     "Products": ""
   }, {
     "Category": "Sporting Goods",
     "Products": [{
       "product_id": "2",
       "short_description": "short desc 2",
       "cost": "20"
     }, {
       "product_id": "3",
       "short_description": "short desc 3",
       "cost": "30"
     }]
   }, {
     "Category": "Housewares",
     "Products": [{
       "product_id": "1",
       "short_description": "short desc",
       "cost": "10"
     }]
   }, ]
 };
 var output = "<ul>";
 for (var i in data.Categories) {
   output += "<li>" + data.Categories[i].Category + "</li>";
   output += "<ul>";
   for (var j in data.Categories[i].Products) {
     output += "<li>" + data.Categories[i].Products[j].cost + "</li>";
     output += "<li>" + data.Categories[i].Products[j].product_id + "</li>";
     output += "<li>" + data.Categories[i].Products[j].short_description + "</li>";
   }
   output += "</ul>";
 }
 output += "</ul>";
 document.getElementById("testdiv").innerHTML = output;

<div id="testdiv"></div>