jquery loop on Json data using $.each

Question

I have the following JSON returned in a variable called data.

THIS IS THE JSON THAT GETS RETURNED...

[ 
{"Id": 10004, "PageName": "club"}, 
{"Id": 10040, "PageName": "qaz"}, 
{"Id": 10059, "PageName": "jjjjjjj"}
]

and I am trying to loop through the collection using $.each but I am running into problems where the alert is showing undefined. I have tried a lot of different syntax but can't seem to figure this out.

The JQuery I am using is

$.each(data, function(i, item) {
    alert(item.PageName);
});

Can any one point me in the right direction?

EDIT This is the code I am using to grab the data

$.getJSON('/Cms/GetPages/123', null, function(data) {
  fillSelect(data);
});

and this is the function that gets called upon call back

function fillSelect(data) {
  alert(data);
  $.each(data, function(i, item) {
    alert(item.PageName);
  });
}

EDIT 2 This is slightly confusing me, according to the docs it should work as I have it, but it doesn't. According to fiddler the header shows:-

Content-Type: application/json; charset=utf-8

and the JSON is exactly correct above. I am using chrome if this makes any different. Will test in IE and FF....

EDIT 3

using $.get produces

"[\r\n {\r\n \"Id\": 10041,\r\n \"PageName\": \"01234567890\",\r\n \"MetaId\": 1000,\r\n \"TemplateId\": 2\r\n },\r\n {\r\n \"Id\": 10001,\r\n \"PageName\": \"about\",\r\n \"MetaId\": 1000,\r\n \"TemplateId\": 1\r\n },\r\n {\r\n \"Id\": 10056,\r\n \"PageName\": \"fdgdfgdfg\",\r\n \"MetaId\": 1000,\r\n \"TemplateId\": 1\r\n },\r\n {\r\n \"Id\": 10052,\r\n \"PageName\": \"hjkhjk\",\r\n \"MetaId\": 1000,\r\n \"TemplateId\": 2\r\n },\r\n {\r\n \"Id\": 10059,\r\n \"PageName\": \"jjjjjjj\",\r\n \"MetaId\": 1000,\r\n \"TemplateId\": 1\r\n },\r\n {\r\n \"Id\": 10057,\r\n \"PageName\": \"qqqqq\",\r\n \"MetaId\": 1000,\r\n \"TemplateId\": 2\r\n },\r\n {\r\n \"Id\": 10054,\r\n \"PageName\": \"qwqw\",\r\n \"MetaId\": 1000,\r\n \"TemplateId\": 2\r\n }\r\n]"

It works for me. Make sure data are passed correctly to each method. — kgiannakakis
– kgiannakakis, Commented Feb 26, 2010 at 14:51

Sygmoral · Accepted Answer · 2019-07-14 02:25:45Z

331

var data = [ 
 {"Id": 10004, "PageName": "club"}, 
 {"Id": 10040, "PageName": "qaz"}, 
 {"Id": 10059, "PageName": "jjjjjjj"}
];

$.each(data, function(i, item) {
    alert(data[i].PageName);
});

$.each(data, function(i, item) {
    alert(item.PageName);
});

these two options work well, unless you have something like:

var data.result = [ 
 {"Id": 10004, "PageName": "club"}, 
 {"Id": 10040, "PageName": "qaz"}, 
 {"Id": 10059, "PageName": "jjjjjjj"}
];

$.each(data.result, function(i, item) {
    alert(data.result[i].PageName);
});

EDIT:

try with this and describes what the result

$.get('/Cms/GetPages/123', function(data) {
  alert(data);
});

FOR EDIT 3:

this corrects the problem, but not the idea to use "eval", you should see how are the response in '/Cms/GetPages/123'.

$.get('/Cms/GetPages/123', function(data) {
  $.each(eval(data.replace(/[\r\n]/, "")), function(i, item) {
   alert(item.PageName);
  });
});

edited Jul 14, 2019 at 2:25

Sygmoral

7,2012 gold badges27 silver badges33 bronze badges

answered Feb 26, 2010 at 14:55

andres descalzo

15k14 gold badges66 silver badges119 bronze badges

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

7 Comments

Rippo Over a year ago

Looks like I needed to add eval(data)

andres descalzo Over a year ago

in the function "httpData" in jQuery you can see a called window["eval"] for the json data. you do not need to use eval. this line "$. get ( '/ Cms/GetPages/123'" is to show you that are receiving in "data".

andres descalzo Over a year ago

james.padolsey.com/jquery/#v=1.3.2&fn=jQuery.ajax james.padolsey.com/jquery/#v=1.3.2&fn=jQuery.httpData

Rippo Over a year ago

Have updated answer (see EDIT 3) to show what $.get produces

andres descalzo Over a year ago

how are you returning the data in "/ Cms/GetPages/123"?

|

vava · Accepted Answer · 2010-02-26 15:40:49Z

17

Have you converted your data from string to JavaScript object?

You can do it with data = eval('(' + string_data + ')'); or, which is safer, data = JSON.parse(string_data); but later will only works in FF 3.5 or if you include json2.js

jQuery since 1.4.1 also have function for that, $.parseJSON().

But actually, $.getJSON() should give you already parsed json object, so you should just check everything thoroughly, there is little mistake buried somewhere, like you might have forgotten to quote something in json, or one of the brackets is missing.

edited Feb 26, 2010 at 15:40

answered Feb 26, 2010 at 14:57

vava

25.5k11 gold badges67 silver badges79 bronze badges

5 Comments

Rippo Over a year ago

Looks like I need to add fillselect(eval(data));

Rippo Over a year ago

BTW how compatible is eval?

Greg Over a year ago

That should be data = eval('('+string_data+')');. Also, jQuery has another function data = jQuery.parseJSON(string_data);

Rippo Over a year ago

There is something not quite right. only eval(data) works. Please see my EDIT 2

Dominik Ras Over a year ago

I've seen jQuery.parseJSON(string_data) fail in certain instances, where data = eval('('+string_data+')') works just fine.

António Almeida · Accepted Answer · 2018-10-13 23:25:38Z

8

$.each(JSON.parse(result), function(i, item) {
    alert(item.number);
});

edited Oct 13, 2018 at 23:25

António Almeida

10.2k8 gold badges62 silver badges72 bronze badges

answered Oct 13, 2018 at 14:44

Rolando Gonzales Medina

811 silver badge2 bronze badges

Comments

kgiannakakis · Accepted Answer · 2010-02-26 15:05:07Z

5

getJSON will evaluate the data to JSON for you, as long as the correct content-type is used. Make sure that the server is returning the data as application/json.

answered Feb 26, 2010 at 15:05

kgiannakakis

104k28 gold badges163 silver badges197 bronze badges

1 Comment

Rippo Over a year ago

according to fiddler the content type is Content-Type: application/json; charset=utf-8

Collectives™ on Stack Overflow

jquery loop on Json data using $.each

4 Answers 4

7 Comments

5 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

7 Comments

5 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related