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

Answer 1

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

Answer 2

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

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