2012-03-27 70 views
30

我有一个由PHP生成的JSON对象。这是一个有一组日期的对象。它有timeStamp,然后是日期的格式化版本。我将如何在jQuery中迭代这个?如何迭代jQuery中的这个JSON对象?

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

我已经试过:

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

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

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

我清理你的代码为子孙后代,这是一个很好的例子。 – 2016-07-23 23:01:24

回答

61

既然你标记你的问题作为jquery一个,你应该使用$.each因为它是jQuery的迭代器功能:

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

如果你想坚持到for in语法(我看你已经试过了),解决办法可能是:

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

但要小心该for in语法可以做的比你想象的那样:它遍历属性从原型继承了,所以它可能是有用的,以确保您的对象实例的属性只迭代:

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

更新
另一种优雅的方式是使用Object.keys方法返回一个包含在目标对象中的所有键遍历所有对象的属性的数组:

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

嘿,谢谢,我决定坚持使用for语法。只是我更熟悉来自PHP和Java背景 – 2012-03-27 10:01:37

0

jQuery.each()可能是最简单的方法,检查了这一点:http://api.jquery.com/jQuery.each/

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

它应该是'data.dates'来使它工作。 – 2014-07-02 12:19:21

3

您使用$.each()
它看起来像这样:

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

$ .each在没有长度的情况下不起作用,只会被传递。 – gcoleman0828 2014-04-03 19:27:31

+0

OP正试图迭代一个日期数组,数组的长度为:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/length – 2014-04-07 15:24:32

+0

所以也许downvotes有点苛刻? – 2014-04-07 15:25:13

1

你可以简单地重复救援人员到场唉使用jQuery each的JSON结构:

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