How do I loop through JSON with jQuery?

Question

I've seen a lot of sites about this topic, but I can't get any of the examples and instructions to work for me.

I want to loop through some JSON using jQuery. In the JSON example below I'd like to output "model-1" and then output just the "origin". Once that is done then I would do the same thing for the next entry which in this case is "model-2". This could go on hundreds of times until it is finished so I can't specifically call of the entries ("model-1", "model-2", "model-3", etc.) by name.

{
    "model-1": {
        "origin": "Japan",
        "price": "$149",
        "availability": "Available"
    },
    "model-2": {
        "origin": "USA",
        "price": "$199",
        "availability": "Available"
    }
}

And here is the code I have so far to do this.

jQuery(function($) {
    $.getJSON('/mydata.json', function(data) {

      var obj = jQuery.parseJSON(data);

    });
});

I would add more extensive code including my loop, but literally nothing I've tried has given me good results. Either I get nothing and it breaks or I get a bunch of 'undefined's. Any help would be greatly appreciated.

Guffa · Accepted Answer · 2015-02-20 18:15:33Z

1

You don't need to parse the JSON. That is only needed if you specifically fetch is as text (using the ajax method and setting the dataType property), or use automatic detection (using the ajax method without setting the dataType property) and the server returns it with the wrong MIME type. The getJSON method is a wrapper for the ajax method, with the dataType set to JSON, so it will automatically parse the response.

The callback function will be called with a parameter containing the response already parsed into an object, so you can loop through it. Example:

$.getJSON('/mydata.json', function(data) {
  $.each(data, function(key, obj){
    console.log(key + ' has origin ' + obj.origin);
  });
});

Note that the order of the properties in the object is unspecified. The code above will actually show the items in different order depending on what browser is used.

edited Feb 20, 2015 at 18:15

answered Feb 20, 2015 at 18:10

Guffa

703k111 gold badges760 silver badges1k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jkupczak Over a year ago

Thank you for touching on the parsing thing. Once I removed that from my code things started to actually DO something. I am curious about the items appearing in a different order depending on browser. I am using the latest IE, Firefox, and Chrome and all three of them displayed the results in the order I expected. Which is to say, the order they appear in the JSON file. Which browsers would display them out of order? And what could I do to prevent that?

Guffa Over a year ago

@jimmykup: Any browser might give you the items in any order, depending on the situation. It seems that you found a case where the browsers behave the same, probably because the property names are similar, but that may change when you get to model-10 for example. It's not just that the order is unspecified, I have actually observed browsers returning the properties in different order, so even if you seem to get a consistent result there are differences in the implementation in different browsers.

void · Accepted Answer · 2015-02-20 18:08:17Z

1

Just use a for...in loop, and loop through the obj

$.getJSON('/mydata.json', function(data) {

  var obj = jQuery.parseJSON(data);
  for(j in obj)
    {
     console.log(obj[j].origin);
    }

});

answered Feb 20, 2015 at 18:08

void

36.7k10 gold badges71 silver badges111 bronze badges

Comments

Antti Haapala · Accepted Answer · 2015-02-20 18:10:21Z

You can use $.each to iterate over the models:

$.each(data, function(model, value) {
    var origin = value.origin;
    // use model and origin
});

However the models will not be in the original order, as Javascript object properties do not preserve the order when loaded from JSON. If you need to preserve the order, you'd have to have an array on the top level:

[
    {
        "model": "model-1",
        "origin": "Japan",
        "price": "$149",
        "availability": "Available"
    },
    {
        "model": "model-2"
        "origin": "USA",
        "price": "$199",
        "availability": "Available"
    }
]

Which again you could iterate with $.each:

$.each(data, function (index, item) {
    var model = item.model,
        origin = item.origin;
    // do whatever you need with model and origin
});

(Also $.getJSON already supplies a parsed structure into your function, so you do not need to do JSON.parse/$.parseJSON there).

zod · Accepted Answer · 2015-02-20 18:07:58Z

0

Use .each

A generic iterator function, which can be used to seamlessly iterate over both objects and arrays

http://api.jquery.com/jquery.each/

http://www.mkyong.com/jquery/jquery-loop-over-json-string-each-example/

answered Feb 20, 2015 at 18:07

zod

12.5k25 gold badges74 silver badges107 bronze badges

Comments

Elliot Bonneville · Accepted Answer · 2015-02-20 18:08:09Z

0

The for (... in ...) loop structure would be ideal here. Here's what it would look like:

$.getJSON('/mydata.json', function(data) {
    var obj = jQuery.parseJSON(data);

    for (var prop in obj) {
        console.log(obj[prop].origin);
    }
});

When you use the for (... in ...) structure, you loop through the keys of all the properties on the specified object. prop will be first "model-1", and then "model-2", and so on so forth. So you access the property at that key, and from there you can get origin.

answered Feb 20, 2015 at 18:08

Elliot Bonneville

53.6k23 gold badges101 silver badges125 bronze badges

Collectives™ on Stack Overflow

How do I loop through JSON with jQuery?

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related