JQuery $.each遍历JavaScript数组对象实例


Posted in Javascript onSeptember 01, 2014

查看一个简单的jQuery的例子来遍历一个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, 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字符串转换为JavaScript对象。
要修复它,通过标准JSON.parse()或jQuery 的 $.parseJSON 将其转换为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);
});
Javascript 相关文章推荐
xheditor与validate插件冲突的解决方案
Apr 15 Javascript
js实现运动logo图片效果及运动元素对象sportBox使用方法
Dec 25 Javascript
JavaScript indexOf方法入门实例(计算指定字符在字符串中首次出现的位置)
Oct 17 Javascript
zTree插件下拉树使用入门教程
Apr 11 Javascript
AngularJs定制样式插入到ueditor中的问题小结
Aug 01 Javascript
BootStrap+Angularjs+NgDialog实现模式对话框
Aug 24 Javascript
bootstrap网格系统使用方法解析
Jan 13 Javascript
jquery获取下拉框中的循环值
Feb 08 Javascript
原生js封装自定义滚动条
Mar 24 Javascript
vue如何引用其他组件(css和js)
Apr 13 Javascript
Vue 封装防刷新考试倒计时组件的实现
Jun 05 Javascript
vue 实现上传组件
May 31 Vue.js
关闭页面时window.location事件未执行的原因分析及解决方案
Sep 01 #Javascript
用js通过url传参把数据从一个页面传到另一个页面
Sep 01 #Javascript
用jquery实现动画跳到顶部和底部(这个比较简单)
Sep 01 #Javascript
Javascript让DEDECMS告别手写Tag
Sep 01 #Javascript
通过JS来动态的修改url,实现对url的增删查改
Sep 01 #Javascript
一个不错的仿携程自定义数据下拉选择select
Sep 01 #Javascript
原生javascript实现拖动元素示例代码
Sep 01 #Javascript
You might like
PHP4.04简明安装
2006/10/09 PHP
PHP $_FILES中error返回值详解
2014/01/30 PHP
PHP获取MySql新增记录ID值的3种方法
2014/06/24 PHP
php中数组最简单的使用方法
2020/12/27 PHP
[原创]站长必须要知道的javascript广告代码
2007/05/30 Javascript
用javascript实现点击链接弹出"图片另存为"而不是直接打开
2007/08/15 Javascript
JavaScript中关于indexOf的使用方法与问题小结
2010/08/05 Javascript
基于Jquery实现的一个图片滚动切换
2012/06/21 Javascript
jquery删除数据记录时的弹出提示效果
2014/05/06 Javascript
js设置cookie过期当前时间减去一秒相当于立即过期
2014/09/04 Javascript
javascript判断css3动画结束 css3动画结束的回调函数
2015/03/10 Javascript
浅谈vue引用静态资源需要注意的事项
2018/09/28 Javascript
微信小程序swiper使用网络图片不显示问题解决
2019/12/13 Javascript
JavaScript如何判断对象有某属性
2020/07/03 Javascript
pyv8学习python和javascript变量进行交互
2013/12/04 Python
Python实现简易版的Web服务器(推荐)
2018/01/29 Python
python pandas读取csv后,获取列标签的方法
2018/11/12 Python
强悍的Python读取大文件的解决方案
2019/02/16 Python
django 自定义过滤器的实现
2019/02/26 Python
Python将列表数据写入文件(txt, csv,excel)
2019/04/03 Python
Django框架实现的分页demo示例
2019/05/25 Python
python修改字典键(key)的方法
2019/08/05 Python
Python ORM编程基础示例
2020/02/02 Python
django实现日志按日期分割
2020/05/21 Python
python七种方法判断字符串是否包含子串
2020/08/18 Python
Css3新特性应用之视觉效果实例
2016/12/12 HTML / CSS
英国骑行、跑步、游泳、铁人三项运动装备专卖店:Wiggle
2016/08/23 全球购物
会计实习期自我鉴定
2013/10/06 职场文书
应届生财务管理求职信
2013/11/06 职场文书
办公室前台岗位职责范本
2013/12/10 职场文书
超市重阳节活动方案
2014/02/10 职场文书
C++程序员求职信范文
2014/04/14 职场文书
日语专业求职信
2014/07/04 职场文书
英文感谢信范文
2015/01/21 职场文书
优秀党员个人总结
2015/02/14 职场文书
2015年乡镇食品安全工作总结
2015/10/22 职场文书