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

`shops` is not an array. It is an object. http://stackoverflow.com/questions/684672/loop-through-javascript-object — azium, Sep 28 '15 at 14:27
Can you please `console.log(json);` and tell me what it is returning? — Deepak Biswal, Sep 28 '15 at 14:27
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 — Deepak Biswal, Sep 28 '15 at 14:29
If you are the one generating the JSON, perhaps you should fix it to be an array and not an object. — Steve Wellens, Sep 28 '15 at 14:39

Marcos Casagrande · Accepted Answer · 2015-09-28T15:02:51.137

4

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);
     }

edited Sep 28 '15 at 15:02

answered Sep 28 '15 at 14:36

Marcos Casagrande

37,983
8
84
98

$.each will return property names here, `value.name` and `value.id` are undefined. – Stumblor Sep 28 '15 at 14:37
Hehe, just kidding ;) But you did make me retest it 3 times! – Marcos Casagrande Sep 28 '15 at 14:45
1

@MarcosCasagrande can i use just for loop without using for in? – Sep 28 '15 at 14:46
@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! – Marcos Casagrande Sep 28 '15 at 14:48
@MarcosCasagrande when we are dealing with json is this correct?..i mean using objects without arrays? – Sep 28 '15 at 14:51
in your example, you could perfectly use an array. "shops": [ { "id": "1", "name": "abcd", "open_time": "9AM", "closed_time": "9PM" }, { "id": "1", "name": "efgh", "open_time": "9AM", "closed_time": "9PM" } ] But your JSON is ok. You just have to loop it a little bit different! – Marcos Casagrande Sep 28 '15 at 14:52
@MarcosCasagrande how can i access that shop 1,2 part? – Sep 28 '15 at 14:56
In my example, in each iteration you are accessing to each part. Or do you mean literally the "1" and "2", in that case, you could use "key" in the $.each or "shop" in the for-in both will have the key. – Marcos Casagrande Sep 28 '15 at 15:01

score 1 · Answer 2 · answered Sep 28 '15 at 14:35

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]);
    }
 });

Dan O · Answer 3 · 2015-09-28T14:44:35.697

0

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);
});

edited Sep 28 '15 at 14:44

answered Sep 28 '15 at 14:33

Dan O

6,022
2
32
50

You first code section is wrong - `Object.keys(json.shops)[i]` will return a string key, not an object. – Stumblor Sep 28 '15 at 14:40

How to loop through this json array using javascript

3 Answers3