How to loop through this json array using javascript

Question

I try to loop this json but it is not working.I want to loop through the shops but it is not working

The json:

{
 "type": "shops",
 "shops": {
 "1": {
 "id": "1",
 "name": "abcd",
 "open_time": "9AM",
 "closed_time": "9PM"
 },
 "2": {
 "id": "1",
 "name": "efgh",
 "open_time": "9AM",
 "closed_time": "9PM"
 }
 }
}

The script

$.getJSON( "simple.json", function( json ) {
 console.log( "JSON Data: " + (json) );
 for(var i = 0; i < json.shops.length; i++){
 console.log(json[i].shops.name);
 }
 });

This doesn't give me any results

• azium: shops is not an array. It is an object. stackoverflow.com/questions/684672/…
• Deepak Biswal: Can you please console.log(json); and tell me what it is returning?
• user3475082: it gives me [object Object]
• Deepak Biswal: As per the above JSON doc you provided that is not an array a single json document. You don't have to loop on that
• Steve Wellens: If you are the one generating the JSON, perhaps you should fix it to be an array and not an object.

Answer 1

json.shops isn't an array, it's an object. You can use a for..in loop or $.each

Using $.each

$.getJSON( "simple.json", function( json ) {
 console.log( "JSON Data: " + (json) );
 $.each(json.shops, function(key, shop){
 //key will be "1", "2"...n
 console.log(shop.name, shop.id);
 });
 });

Using for..in

 for(var shop in json.shops){
 //shop will be "1", "2"...n
 if (json.shops.hasOwnProperty(shop))
 console.log(json.shops[shop].name);
 }

• Stumblor: $.each will return property names here, value.name and value.id are undefined.
• Marcos Casagrande: Hehe, just kidding ;) But you did make me retest it 3 times!
• user3475082: @MarcosCasagrande can i use just for loop without using for in?
• Marcos Casagrande: @user3475082 You can't loop through an object with a normal for loop. You have to use the for in statement. You can just use jQuery.each if you don't like the for in!
• user3475082: @MarcosCasagrande when we are dealing with json is this correct?..i mean using objects without arrays?

Answer 2

As shown in the comments, shops is an object, not an array. You can loop through all the properties of a javascript object using:

$.getJSON( "simple.json", function( json ) {
 console.log( "JSON Data: " + (json) );
 for(var key in json.shops){
 if (!json.shops.hasOwnProperty(key)) continue;
 console.log(json.shops[key]);
 }
 });

Answer 3

json.shops.length is undefined, because shops is an object and not an array and doesn't (in this case) have a "length" property. but every JavaScript object can have properties, and those property names can be retrieved as a list, which you can then iterate over:

for(var i = 0; i < Object.keys(json.shops).length; i++){
 console.log(json.shops[Object.keys(json.shops)][i].name);
}

or, alternately, fetch the object's keys as an array and use the forEach function built in to arrays:

Object.keys(json.shops).forEach(function(element, arrayIndex, array) {
 console.log(array[element].name);
});

• Stumblor: You first code section is wrong - Object.keys(json.shops)[i] will return a string key, not an object.