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?

obviously the same way as categories ... it's kind of question like I am able to multiply 4 by 3, but how can I multiply 4 by 5... — Ivan Yonkov
– Ivan Yonkov, Commented Jun 24, 2015 at 2:02
I'm sure it's easy, but everything I've tried hasn't worked :( — Merlin7591
– Merlin7591, Commented Jun 24, 2015 at 2:06

AmmarCSE · Accepted Answer · 2015-06-24 02:06:31Z

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>

Collectives™ on Stack Overflow

Trouble parsing Json response

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related