JQuery $.each遍歷JavaScript數(shù)組對象實例
更新時間：2014年09月01日 09:51:02 投稿：whsnow
聲明了一個JSON字符串直接遍歷，在Chrome控制臺下面報錯，解決方法是將JSON字符串轉(zhuǎn)換為JavaScript對象
查看一個簡單的jQuery的例子來遍歷一個JavaScript數(shù)組對象。
var json = [
{"id":"1","tagName":"apple"},
{"id":"2","tagName":"orange"},
{"id":"3","tagName":"banana"},
{"id":"4","tagName":"watermelon"},
{"id":"5","tagName":"pineapple"}
];
$.each(json, function(idx, obj) {
alert(obj.tagName);
});
上面的代碼片斷工作正常，提示 “apple”, “orange” … 等，如預期一樣。
問題: JSON 字符串
下面的例子中，聲明了一個JSON字符串（隨附單或雙引號）直接地。
var json = '[{"id":"1","tagName":"apple"},{"id":"2","tagName":"orange"},
{"id":"3","tagName":"banana"},{"id":"4","tagName":"watermelon"},
{"id":"5","tagName":"pineapple"}]';
$.each(json, function(idx, obj) {
alert(obj.tagName);
});
在Chrome中，它顯示在控制臺下面的錯誤：
Uncaught TypeError: Cannot use 'in' operator to search for '156'
in [{"id":"1","tagName":"apple"}...
解決方案：JSON字符串轉(zhuǎn)換為JavaScript對象。
要修復它，通過標準JSON.parse()或jQuery 的 $.parseJSON 將其轉(zhuǎn)換為JavaScript對象。
var json = '[{"id":"1","tagName":"apple"},{"id":"2","tagName":"orange"},
{"id":"3","tagName":"banana"},{"id":"4","tagName":"watermelon"},
{"id":"5","tagName":"pineapple"}]';
$.each(JSON.parse(json), function(idx, obj) {
alert(obj.tagName);
});
//or
$.each($.parseJSON(json), function(idx, obj) {
alert(obj.tagName);
});
相關(guān)文章
尋尋覓覓，覓覓尋尋終于找到了一些關(guān)于jquery性能優(yōu)化的文章，果斷收藏當然不能忘了加上自己的一些總結(jié)及理解。2014-05-05
LazyForm jQuery plugin 定制您的CheckBox Radio和Select
LazyForm jQuery plugin 定制您的CheckBox Radio和Select ，需要的朋友可以參考下。2009-10-10
這篇文章主要介紹了NiftyCube——輕松實現(xiàn)圓角邊框2007-02-02
JQuery實現(xiàn)點擊div以外的位置隱藏該div窗口
鼠標點擊div外的地方讓div窗口隱藏消失，實現(xiàn)方法有很多，在本文將為大家介紹下jquery中時如何實現(xiàn)的，感興趣的朋友不要錯過了哈2013-09-09
這篇文章主要為大家詳細介紹了jquery+css實現(xiàn)移動端元素拖動排序，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
這篇文章主要為大家詳細介紹了基于jquery實現(xiàn)圖片放大功能的相關(guān)資料，具有一定的參考價值，感興趣的朋友可以參考一下2016-05-05
jquery插件開發(fā)基礎(chǔ)：開發(fā)jQuery 插件的基本格式,開發(fā)全局函數(shù)的基本格式，接下來為您詳細介紹，感興趣的朋友可以了解哦2013-01-01
jQuery實現(xiàn)的頁面遮罩層功能示例【測試可用】
這篇文章主要介紹了jQuery實現(xiàn)的頁面遮罩層功能,結(jié)合完整實例形式詳細分析了jQuery遮罩層實現(xiàn)步驟與相關(guān)操作技巧,需要的朋友可以參考下2017-10-10
本文給大家分享的是jQuery實現(xiàn)購物車數(shù)字加減效果的3種實現(xiàn)方法，分別是左右加減數(shù)字、Bootstrap風格，右側(cè)加減以及jQuery ui風格，右側(cè)加減，效果非常棒，需要的小伙伴來參考下吧。2015-03-03
這篇文章主要介紹了jQuery實現(xiàn)倒計時功能,結(jié)合完整實例形式詳細分析了jQuery倒計時功能相關(guān)實現(xiàn)技巧與操作注意事項,需要的朋友可以參考下2020-06-06