Why doesn't this jQuery .each loop through json data correctly?

Question

Here's my ajax call:

$.ajax({ 
    url: 'url-to-json',
    type: 'POST',
    dataType: 'json',
    cache: 'false',
    data: { lat: lat, lng: lng }
}).done(function(data) {
    $.each(data, function(a) {
        alert(data[a]);
    });
});

Here's the json it's iterating over:

[
{"Id":"4c75bd5666be6dcb9f70c10f","Name":"BXtra","EnglishName":null,"Lat":35.7515869140625,"Lng":139.33872985839844},

{"Id":"4c5160a1d2a7c9b655d51211","Name":"セブンイレブン 武蔵野台店","EnglishName":null,"Lat":35.750205993652344,"Lng":139.33448791503906},

...
]

But instead of actually giving me access to the properties of each item in the json array, it literally loops through each character in the array, one by one.

What am I doing wrong?

Try passing a success callback to the .ajax function instead of using .done(). — Blazemonger
– Blazemonger, Commented Jul 5, 2012 at 15:49
Thanks for the tip. I tried this too. Still loops through each character of the json result, one-by-one. — Chaddeus
– Chaddeus, Commented Jul 5, 2012 at 15:59
I also suspect the problem is with your JSON, then. Are you sure the JSON you're getting is parseable? — Blazemonger
– Blazemonger, Commented Jul 5, 2012 at 16:07
Thanks, manually calling $.parseJSON(json) works. I'll have to look closer at the MIME type of the return. — Chaddeus
– Chaddeus, Commented Jul 5, 2012 at 16:33

jackwanders · Accepted Answer · 2012-07-05 16:03:50Z

9

You can modify your $.each function in two ways:

$.each(data, function(index,el) {
    // el = object in array
    // access attributes: el.Id, el.Name, etc
});

Or,

$.each(data, function() {
    // this = object in array
    // access attributes: this.Id, this.Name, etc
});

If data is a string within your done function and not an object, then you'll need to run

data = $.parseJSON(data)

before your $.each loop

edited Jul 5, 2012 at 16:03

answered Jul 5, 2012 at 15:49

jackwanders

16.1k3 gold badges42 silver badges40 bronze badges

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

4 Comments

Chaddeus Over a year ago

I tried this... it appears every el is referencing each individual character of the json... almost as if it were a string, and the loop iterates of each individual character rather than each entry in the array.

jackwanders Over a year ago

Oh, in that case, data is probably coming back as a string, and not as an object. Run alert(typeof data) from within your done function. If it comes back as string, then data isn't being converted into an object. I don't know if .done() uses the dataType attribute of $.ajax or whether it only uses the raw response

Chaddeus Over a year ago

That was it... even though I set the type to JSON, it wasn't parsing it... thanks!

Christophe Over a year ago

@Chad did you check the MIME type returned by the server? docs.jquery.com/Specifying_the_Data_Type_for_AJAX_Requests

Zbigniew · Accepted Answer · 2012-07-05 15:43:58Z

4

Use this to refer to current element inside .each:

$.ajax({ 
    url: 'url-to-json',
    type: 'POST',
    dataType: 'json',
    cache: 'false',
    data: { lat: lat, lng: lng }
}).done(function(data) {
    $.each(data, function() {
        alert(this.Id);
    });
});

answered Jul 5, 2012 at 15:43

Zbigniew

27.6k6 gold badges62 silver badges68 bronze badges

4 Comments

Brad Christie Over a year ago

To add explanation, the OP's method was retrieving the object back when using data[a] which still needed to reference a property of that object. OP's method would have been fine if they just modified it to something like data[a].Id, data[a]['Id'], or alike. However, while inside the .each this==object[key], that is to say this==data[a]

Chaddeus Over a year ago

using this still iterates over each character of the JSON individually. If I alert(this) it show each character, one by one. If I alert(this.Id) it shows undefined.

Zbigniew Over a year ago

I have verified it and it works. Are you sure that you've got correct data in done?

Chaddeus Over a year ago

Appeared even though I set the type as JSON, it wasn't parsing it.

James Ellis-Jones · Accepted Answer · 2012-07-05 16:00:59Z

0

Maybe your server is not returning the right MIME type for JSON ('application/json') and JQuery is interpreting it as just a string?

answered Jul 5, 2012 at 16:00

James Ellis-Jones

3,11223 silver badges13 bronze badges

Comments

Rick · Accepted Answer · 2012-07-05 16:13:36Z

0

Using success always works for me:

$.ajax({ 
  url: 'url-to-json',
  type: 'POST',
  dataType: 'json',
  cache: 'false',
  data: { lat: lat, lng: lng },
  success: function(data) {
    $.each(data, function() {
      alert(this.Id);
    });
  }
});

Forcing a parse of the JSON would be: jQuery.parseJSON( json ) as a temporary fix if the dataType is playing up...

answered Jul 5, 2012 at 16:13

Rick

9976 silver badges14 bronze badges

Collectives™ on Stack Overflow

Why doesn't this jQuery .each loop through json data correctly?

4 Answers 4

4 Comments

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related