how to loop through JSON array in jQuery?

Question

I have a PHP page from which I get response in JSON:

[{'com':'something'},{'com':'some other thing'}]

I want to loop it and append each to a div.

This is what I tried:

var obj = jQuery.parseJSON(response);
$.each(obj.com, function(key,value) {
 alert(key+':'+value);
}

This alerts as undefined, and also response is the JSON array..

• Niket Malik: @KoIIIeY doesn't show any alert..

Answer 1

Your array has default keys(0,1) which store object {'com':'some thing'} use:

var obj = jQuery.parseJSON(response);
$.each(obj, function(key,value) {
 alert(value.com);
}); 

• Niket Malik: Anyway I can fade each? I used .hide().fadeIn(800); while appending, but it fades the whole thing at once, is it possible to fade 1 by 1?
• Dell: You have to rebind event($(...).bind("") Or attachEvent()) after(before provide control to user) adding any element.
• Niket Malik: I figured it out, I hide all the divs then did a fade in on each, anyway thanks :D
• ChristoKiwi: Syntax error on the last line: needs correct close })

Answer 2

Try this:

var data = jQuery.parseJSON(response);
$.each(data, function(key, item) 
{
 console.log(item.com);
});

or

var data = $.parseJSON(response);
$(data).each(function(i,val)
 {
 $.each(val,function(key,val)
 {
 console.log(key + " : " + val); 
 });
});

• Niket Malik: Loops but shows [object, object] also I'm getting the json via ajax call

Answer 3

You are iterating through an undefined value, ie, com property of the Array's object, you should iterate through the array itself:

$.each(obj, function(key,value) {
 // here `value` refers to the objects 
});

Also note that jQuery intelligently tries to parse the sent JSON, probably you don't need to parse the response. If you are using $.ajax(), you can set the dataType to json which tells jQuery parse the JSON for you.

If it still doesn't work, check the browser's console for troubleshooting.

Answer 4

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

Or else You can try this method

var data = jQuery.parseJSON(response);
$.each(data, function(key,value) {
 alert(value.Id); //It will shows the Id values
}); 

Answer 5

var data=[{'com':'something'},{'com':'some other thing'}];
$.each(data, function() {
 $.each(this, function(key, val){
 alert(val);//here data 
 alert (key); //here key
 });
});

Answer 6

you can get the key value pair as

<pre>
function test(){ 
var data=[{'com':'something'},{'com':'some other thing'}]; 
$.each(data, function(key,value) { 
alert(key); 
alert(value.com); 
}); 
}
</pre>

• Sampada: Please also add some explanation to your answer. Thanks!

Answer 7

Try this:

for(var i = 0; i < data.length; i++){
 console.log(data[i].com)
}

Answer 8

try this

var events = [];
alert(doc);
var obj = jQuery.parseJSON(doc);
 $.each(obj, function (key, value) {
 alert(value.title);

});