CODEWITHSUNDEEP
jqueryjson
jkupczak
jkupczak

Reputation: 3021

How do I loop through JSON with jQuery?

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.

Upvotes: 0

Views: 45

Answers (5)

Guffa
Guffa

Reputation: 700212

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.

Upvotes: 1

Antti Haapala -- Слава Україні
Antti Haapala -- Слава Україні

Reputation: 133879

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).

Upvotes: 1

void
void

Reputation: 36703

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

});

Upvotes: 1

Elliot Bonneville
Elliot Bonneville

Reputation: 53291

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.

Upvotes: 0

zod
zod

Reputation: 12417

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/

Upvotes: 0

Related Questions