How do I iterate through this JSON object in jQuery?

Question

I have a JSON object which is generated by PHP. It's an object with a set of dates. It has the timeStamp and then a formatted version of the date. How would I iterate through this in jQuery?

{
  "dates":[
    {
      "timeStamp": 1317596400,
      "formattedDate": "Mon 03 October 2011"
    },
    {
      "timeStamp": 1317682800,
      "formattedDate": "Tue 04 October 2011"
    },
    {
      "timeStamp": 1317855600,
      "formattedDate": "Thu 06 October 2011"
    }
  ]
}

I've tried:

for (var i in data) { 
  alert(data.dates[i].timeStamp); 
};

for (var i in data) { 
  alert(data[i].dates.timeStamp); 
};

and

for (var i in data) { 
  alert(data.dates.timeStamp[i]); 
};

I cleaned up your code for posterity, this is a good example. — Mike Kormendy
– Mike Kormendy, Commented Jul 23, 2016 at 23:01

gion_13 · Accepted Answer · 2018-07-19 19:52:37Z

90

Since you tagged your question as a jquery one, you should use $.each because it's jquery's iterator function:

$.each(data.dates, function(index, element) {
    alert(element.timeStamp); 
});

If you want to stick to the for in syntax (which i see you've tried), a solution might be :

for(var key in data.dates) {
     alert(data.dates[key].timeStamp); 
}

But beware that the for in syntax may do more than you think it does: it iterates over the properties inherited from the prototype too, so it might be usefull to make sure you iterate only on the object instance properties:

for(var key in data.dates) {
    // if it's not something from the prototype
    if(data.dates.hasOwnProperty(key)) {
        alert(data.dates[key].timeStamp); 
    }
}

update
Another elegant way is to use the Object.keys method that returns an array containing all the keys in the targeted object to iterate over all the object's properties:

for(var i=0, keys=Object.keys(data.dates), l=keys.length; i<l; i++) {
    alert(data.dates[i].timeStamp);
}

edited Jul 19, 2018 at 19:52

answered Mar 27, 2012 at 9:51

gion_13

41.5k10 gold badges99 silver badges111 bronze badges

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

3 Comments

Johnathan Au Over a year ago

Hey thanks, I decided to stick with the for in syntax. Just something I'm more familiar with coming from a PHP and Java background

KuroNeko Over a year ago

Shouldn't it be "i" instead of "key" in the alert?..Using 'i' worked for me

gion_13 Over a year ago

Thanks for noticing, @Ravin! It was a typo - the power of copy-paste :)

gion_13 · Accepted Answer · 2014-03-11 08:52:51Z

3

You use $.each().
It looks like this:

$.each(data, function(n, elem) {
    // here you process your data to data loaded to lines               
});

edited Mar 11, 2014 at 8:52

gion_13

41.5k10 gold badges99 silver badges111 bronze badges

answered Mar 27, 2012 at 9:48

mfadel

8971 gold badge12 silver badges33 bronze badges

2 Comments

gcoleman0828 Over a year ago

$.each does not work in situations where there is no length and will just be passed over.

Mike Simmons Over a year ago

the OP is attempting to iterate through an array of dates, arrays have a length: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

Cody Guldner · Accepted Answer · 2017-11-01 02:04:56Z

3

You can simply iterate through the json structure using jQuery each:

$.each(data, function(index, element) {
   alert(element.dates.timeStamp); 
});

edited Nov 1, 2017 at 2:04

Cody Guldner

2,8941 gold badge27 silver badges36 bronze badges

answered Feb 23, 2016 at 10:10

Mohammed Irfan Tirupattur

1,56918 silver badges9 bronze badges

Comments

Mike Simmons · Accepted Answer · 2012-03-27 09:48:08Z

0

jQuery.each() is probably the easiest way, check this out: http://api.jquery.com/jQuery.each/

eg

$.each(dates, function(index, date) { alert(date.timeStamp); });

answered Mar 27, 2012 at 9:48

Mike Simmons

1,2981 gold badge9 silver badges22 bronze badges

Collectives™ on Stack Overflow

How do I iterate through this JSON object in jQuery?

4 Answers 4

3 Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related