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..

@KoIIIeY doesn't show any alert..

Niket Malik
– Niket Malik

2013-12-25 11:49:47 +00:00
Commented Dec 25, 2013 at 11:49 — Niket Malik
– Niket Malik, Commented Dec 25, 2013 at 11:49

Dell · Accepted Answer · 2015-01-06 15:34:49Z

74

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

edited Jan 6, 2015 at 15:34

answered Dec 25, 2013 at 11:54

Dell

9506 silver badges13 bronze badges

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

4 Comments

Niket Malik Over a year ago

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 Over a year ago

You have to rebind event($(...).bind("") Or attachEvent()) after(before provide control to user) adding any element.

Niket Malik Over a year ago

I figured it out, I hide all the divs then did a fade in on each, anyway thanks :D

ChristoKiwi Over a year ago

Syntax error on the last line: needs correct close });

Ritesh · Accepted Answer · 2014-10-30 10:42:27Z

13

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

edited Oct 30, 2014 at 10:42

Ritesh

4974 silver badges15 bronze badges

answered Dec 25, 2013 at 11:48

Prateek

6,9852 gold badges27 silver badges37 bronze badges

1 Comment

Niket Malik Over a year ago

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

Ram · Accepted Answer · 2013-12-25 11:59:36Z

7

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.

edited Dec 25, 2013 at 11:59

answered Dec 25, 2013 at 11:47

Ram

145k16 gold badges174 silver badges201 bronze badges

Comments

Pasupathi Thangavel · Accepted Answer · 2017-10-09 09:55:13Z

7

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

answered Oct 9, 2017 at 9:55

Pasupathi Thangavel

9421 gold badge10 silver badges17 bronze badges

Comments

score 3 · Accepted Answer · 2014-11-15 11:53:43Z

3

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

  });
});

edited Nov 15, 2014 at 11:53

answered Jul 31, 2014 at 13:08

user2667398

Comments

Sampada · Accepted Answer · 2016-04-26 11:12:24Z

2

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>

edited Apr 26, 2016 at 11:12

Sampada

3,0017 gold badges30 silver badges41 bronze badges

answered Apr 26, 2016 at 10:15

user3762267

1 Comment

Sampada Over a year ago

Please also add some explanation to your answer. Thanks!

Vaibhav Jain · Accepted Answer · 2016-04-26 11:21:13Z

2

Try this:

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

answered Apr 26, 2016 at 11:21

Vaibhav Jain

7174 silver badges15 bronze badges

Comments

McNiel Viray · Accepted Answer · 2016-05-27 11:19:51Z

0

try this

var events = [];

alert(doc);
var obj = jQuery.parseJSON(doc);

     $.each(obj, function (key, value) {

    alert(value.title);

});

answered May 27, 2016 at 11:19

McNiel Viray

1011 silver badge4 bronze badges

Collectives™ on Stack Overflow

how to loop through JSON array in jQuery?

8 Answers 8

4 Comments

1 Comment

Comments

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

4 Comments

1 Comment

Comments

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related