Jquery loop through a Json object

Question

Json Code

{
 "pizza":
 {
   "pepperoni lovers":
   {
      "topping": "pepperoni",
      "crust": "hand tossed"
   },

   "sausage lovers":
   {
      "topping": "sausage",
      "crust": "hand tossed"
   }
 }

}

How could I loop through this and populate an array with just the names?

Is that a typo, or are you really missing the required `:` on each pizza type — Kevin B, Apr 29 '13 at 21:02
Not using jQuery for the loops could save you some headaches… — Bergi, Apr 29 '13 at 21:04
@FelixKling Thanks for the link. I'm coming from the XML world. I had no idea I could restructure my code to have an array inside the .json file. That made it a lot easier. — Heath, May 01 '13 at 12:41

score 3 · Answer 1 · answered Apr 29 '13 at 21:05

3

An array of property names? Use this:

var names = Object.keys(data.pizza);

answered Apr 29 '13 at 21:05

Bergi

630,263
148
957
1,375

Does this account for the property names of the inner objects? – Rick Viscomi Apr 29 '13 at 21:14
@Rick: No, but I don't think the OP wants them - I assume that he is only interested in the pizza names. – Bergi Apr 29 '13 at 21:16
Clever. I always think $.each in these cases... – mplungjan Apr 29 '13 at 21:25

Rick Viscomi · Answer 2 · 2013-04-29T21:12:27.017

1

The classic way to iterate over an object is to use a for .. in loop.

for (prop in obj) {
    val = obj[prop];
}

One possible side-effect of this technique is that you are not guaranteed to iterate over the properties in any particular order. If you know the property names ahead of time, you could create an array of property names and iterate.

Since your objects are nested, you will need to nest two for .. in loops to iterate thoroughly:

for (prop in obj) {
    nested_obj = obj[prop];

    for (nested_prop in nested_obj) {
        nested_val = nested_obj[nested_prop];
    }
}

To get an array of all of the property names, you can build the array like this:

props = [];

for (prop in obj) {
    props.push(prop);
    nested_obj = obj[prop];

    for (nested_prop in nested_obj) {
        props.push(nested_prop);
        nested_val = nested_obj[nested_prop];
    }
}

edited Apr 29 '13 at 21:12

answered Apr 29 '13 at 21:05

Rick Viscomi

8,180
4
35
50

1

He says the object was from JSON (or maybe an object literal), so there won't be anything enumerable on the prototype chain anyways. – Bergi Apr 29 '13 at 21:09
Great point, Bergi. Old habits die hard. – Rick Viscomi Apr 29 '13 at 21:11
Also he only needed prop in top object and not obj[prop] – mplungjan Apr 29 '13 at 21:28
That last part was not explicitly made clear. – Rick Viscomi Apr 29 '13 at 21:37

score 1 · Answer 3 · edited Apr 29 '13 at 21:28

1

You can loop through an objects properties with for...in:

a = [];
for (n in pizza) {
    a.push(n);
}

edited Apr 29 '13 at 21:28

mplungjan

169,008
28
173
236

answered Apr 29 '13 at 21:07

Schleis

41,516
7
68
87

1

This is [not "loop like an array"](http://stackoverflow.com/q/500504/1048572) (though the code is correct here). – Bergi Apr 29 '13 at 21:09

mplungjan · Accepted Answer · 2013-04-29T21:27:27.000

0

jQuery, assuming a correct object

DEMO

var pizzaNames=[],
    data = { "pizza" : {
      "pepperoni lovers":
    {
       "topping": "pepperoni",
       "crust": "hand tossed"
    },
      "sausage lovers":
      {
       "topping": "sausage",
       "crust": "hand tossed"
      }
   }
}
// $.each is IE8 compatible, Object.keys is not
$.each(data.pizza,function(name,val) {
   pizzaNames.push(name);
});

edited Apr 29 '13 at 21:27

answered Apr 29 '13 at 21:16

mplungjan

169,008
28
173
236

How would you get the values of only pepperoni lovers (topping, crust) if you didn't want to hard code the name "pepperoni lovers"? – Heath May 01 '13 at 11:42
I do not understand the question. Can you give me the full use case here? – mplungjan May 01 '13 at 12:47
Never mind. I'm coming from the XML world. I didn't know that you can have an array in Json. Once I found that out everything else fell into place. Thanks for answering quickly though. – Heath May 02 '13 at 04:26

Jquery loop through a Json object

4 Answers4