Iterate through a nested array of json objects

Question

I need to iterate through a json array object.

It has the following structure.

var myJSONObject = { "abc": { "prod_1": [ {"prod_ver" : "prod 1 ver 1"}, {"prod_ver" : "prod 1 ver 2"}, ], "prod_2": [ {"prod_ver" : "prod 2 ver 1"}, {"prod_ver" : "prod 2 ver 2"}, ], "prod_3": [ {"prod_ver" : "prod 3 ver 1"}, {"prod_ver" : "prod 3 ver 2"}, ] } }; 

Basically what I'm doing is prod_1 - this is the name of the product and the list of versions that prod_1 is populated inside of it.

So now I want the name of the product, as well as what it had.

The problem is that there can be many products and many versions in this product. Therefore, I need the right loop structure in javascript , which may be common to handle it.

It would be better if the loop stores the product name in one var and its version in another var, as there are some checks that I need for the product name.

If the json structure is incorrect or a better json structure can be written, suggest the correct / best structure.

Please HELP

Thanks in advance.

Answer 1

Since myJSONObject.abc contains a list of products, it makes sense to define the abc property as an array. Like this:

 var myJSONObject = { "abc": [ [ {"prod_ver" : "prod 1 ver 1"}, {"prod_ver" : "prod 1 ver 2"}, ], [ {"prod_ver" : "prod 2 ver 1"}, {"prod_ver" : "prod 2 ver 2"}, ], [ {"prod_ver" : "prod 3 ver 1"}, {"prod_ver" : "prod 3 ver 2"}, ] ] }; 

Then you can iterate over products and their versions using regular loops:

 for(var i = 0; i < myJSONObject.abc.length; i++) { var product = myJSONObject.abc[i]; for(var j = 0; j < product.length; j++) { var version = product[j]; } } 

You can do this a little further and modify the structure of the JSON object a bit to make it more understandable.

 var catalog = { "products": [ { "name": "prod 1", "versions": [ "ver 1", "ver 2" ] }, { "name": "prod 2", "versions": [ "ver 1", "ver 2" ] } ] }; for(var i = 0; i < catalog.products.length; i++) { var product = catalog.products[i]; var productName = product.name; for(var j = 0; j < product.versions.length; j++) { var version = product.versions[j]; } } 

Answer 2

myJSONObject.abc is an object with keys such as prod_1 , prod_2 , etc. You can scroll through the keys of an object using for-in . So:

 var productName; var productVersionArray; for (productName in myJSONObject.abc) { productVersionArray = myJSONObject.abc[productName]; } 

Please note that the order of the keys is not defined by the specification and will differ from the JavaScript engine to the JavaScript engine. If you want to make them in a specific order, you should get an array of them, sort it in the order you want, and then skip this array. (In an environment with ES5 support, you can get an array of object keys from Object.keys(yourObject) . But you will need a pad for older browsers.)

In this loop, you can loop through the array using the standard for loop:

 for (versionIndex = 0; versionIndex < productVersionArray.length; ++versionIndex) { // Use `productVersionArray[versionIndex].prod_ver` here } 

Here is an example that combines all of this:

 (function() { var myJSONObject = { "abc": { "prod_1": [ {"prod_ver" : "prod 1 ver 1"}, {"prod_ver" : "prod 1 ver 2"} ], "prod_2": [ {"prod_ver" : "prod 2 ver 1"}, {"prod_ver" : "prod 2 ver 2"} ], "prod_3": [ {"prod_ver" : "prod 3 ver 1"}, {"prod_ver" : "prod 3 ver 2"} ] } }; var productName; var productVersionArray; var versionIndex; for (productName in myJSONObject.abc) { productVersionArray = myJSONObject.abc[productName]; display(productName + " has " + productVersionArray.length + " versions listed"); for (versionIndex = 0; versionIndex < productVersionArray.length; ++versionIndex) { display("* " + productVersionArray[versionIndex].prod_ver); } } function display(msg) { var p = document.createElement('p'); p.innerHTML = String(msg); document.body.appendChild(p); } })(); 

Live Copy | A source