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"}
]
You can use $.each() like this:
$.each(data, function(i, obj) {
//use obj.id and obj.name here, for example:
alert(obj.name);
});
i and obj in the arguments list?
i is the index and obj is the object that makes up each element.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
.length isn't trivial, so best to cache it if performance is a concern.You could use the .each() function:
$(yourjsondata).each(function(index, element) {
alert('id: ' + element.id + ', name: ' + element.name);
});
.each() is intended for operating on jQuery objects, which aren't meant to contain ordinary arrays, better to use $.each() as it was intended.
$.each method would be more appropriate..get() (which internally is .toArray()) to get a base array of DOM elements though.
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);
});
