24

How to iterate the json data in jquery.

[{"id":"856","name":"India"},
 {"id":"1035","name":"Chennai"},
 {"id":"1048","name":"Delhi"},
 {"id":"1113","name":"Lucknow"},
 {"id":"1114","name":"Bangalore"},
 {"id":"1115","name":"Ahmedabad"},
 {"id":"1116","name":"Cochin"},
 {"id":"1117","name":"London"},
 {"id":"1118","name":"New York"},
 {"id":"1119","name":"California"}
]
Elankeeran
  • 6,134
  • 9
  • 40
  • 57

4 Answers4

56

You can use $.each() like this:

$.each(data, function(i, obj) {
  //use obj.id and obj.name here, for example:
  alert(obj.name);
});
Nick Craver
  • 623,446
  • 136
  • 1,297
  • 1,155
7

You can just use regular javascript too, which I think would be a bit faster (though I'm not really sure how jQuery optimizes each):

var data = [{"id":"856","name":"India"},
 {"id":"1035","name":"Chennai"},
 {"id":"1048","name":"Delhi"},
 {"id":"1113","name":"Lucknow"},
 {"id":"1114","name":"Bangalore"},
 {"id":"1115","name":"Ahmedabad"},
 {"id":"1116","name":"Cochin"},
 {"id":"1117","name":"London"},
 {"id":"1118","name":"New York"},
 {"id":"1119","name":"California"}
];

var data_length = data.length;
for (var i = 0; i < data_length; i++) {
  alert(data[i]["id"] + " " + data[i]["name"]);
}

edited to reflect Nick's suggestion about performance

cambraca
  • 27,014
  • 16
  • 68
  • 99
3

You could use the .each() function:

$(yourjsondata).each(function(index, element) {
    alert('id: ' + element.id + ', name: ' + element.name);
});
Darin Dimitrov
  • 1,023,142
  • 271
  • 3,287
  • 2,928
  • `.each()` is intended for operating on jQuery objects, which aren't meant to contain ordinary arrays, better to use `$.each()` as it was intended. – Nick Craver Nov 20 '10 at 15:11
  • @Nick, I thought that jquery objects such as ones returned from jquery selectors were ordinary arrays. I agree with you that in this case the static `$.each` method would be more appropriate. – Darin Dimitrov Nov 20 '10 at 15:13
  • they have a bunch of other properties as well, you can use `.get()` (which internally is `.toArray()`) to get a base array of DOM elements though. – Nick Craver Nov 20 '10 at 15:16
  • @Nick, yes I know that objects in this array are *enhanced* with additional properties and methods. – Darin Dimitrov Nov 20 '10 at 15:17
  • Perhaps a minor difference, but I think it would be more accurate to say that a jQuery object is an object enhanced with some properties from Array. Otherwise it implies that they have the full functionality of an Array. – user113716 Nov 20 '10 at 15:23
3

iterate on all the object's properties with the $.each function. in each iteration you'll get the name/key and the value of the property:

$.each(data, function(key, val) {
  alert(key+ " *** " + val);
});
shayuna
  • 476
  • 4
  • 8