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 相关文章推荐
关于this和self的使用说明
Aug 01 Javascript
jQuery动态添加 input type=file的实现代码
Jun 14 Javascript
Jquery自定义button按钮的几种方法
Jun 11 Javascript
jQuery实现鼠标滑过Div层背景变颜色的方法
Feb 17 Javascript
jQuery使用post方法提交数据实例
Mar 25 Javascript
AngularJs Modules详解及示例代码
Sep 01 Javascript
JS开发中百度地图+城市联动实现实时触发查询地址功能
Apr 13 Javascript
解决node修改后需频繁手动重启的问题
May 13 Javascript
node.js爬取中关村的在线电瓶车信息
Nov 13 Javascript
Angular5整合富文本编辑器TinyMCE的方法(汉化+上传)
May 26 Javascript
JavaScript读取本地文件常用方法流程解析
Oct 12 Javascript
js实现简易计算器小功能
Nov 18 Javascript
关闭页面时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
php使用curl抓取qq空间的访客信息示例
2014/02/28 PHP
PIGCMS 如何关闭聊天机器人
2015/02/12 PHP
如何使用php等比例缩放图片
2016/10/12 PHP
php中通过eval实现字符串格式的计算公式
2017/03/18 PHP
javascript 读取XML数据,在页面中展现、编辑、保存的实现
2009/10/27 Javascript
js下通过getList函数实现分页效果的代码
2010/09/17 Javascript
使用按钮控制以何种方式打开新窗口的属性介绍
2012/12/17 Javascript
防止xss和sql注入:JS特殊字符过滤正则
2013/04/18 Javascript
以JSON形式将JS中Array对象数组传至后台的方法
2014/01/06 Javascript
js从Cookies里面取值的简单实现
2014/06/30 Javascript
跟我学习javascript的异步脚本加载
2015/11/20 Javascript
深入解析js轮播插件核心代码的实现过程
2017/04/14 Javascript
浅谈 Vue v-model指令的实现原理
2017/06/08 Javascript
angularjs之$timeout指令详解
2017/06/13 Javascript
vue 实现数字滚动增加效果的实例代码
2018/07/06 Javascript
JS开发自己的类库实例分析
2019/08/28 Javascript
[38:44]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第二局
2016/02/25 DOTA
Python3实现的画图及加载图片动画效果示例
2018/01/19 Python
详解python变量与数据类型
2020/08/25 Python
Python3使用tesserocr识别字母数字验证码的实现
2021/01/29 Python
阿迪达斯比利时官方商城:adidas比利时
2016/10/10 全球购物
建筑专业自我鉴定
2013/10/22 职场文书
法学研究生自我鉴定范文
2013/12/04 职场文书
企业申诉管理制度
2014/01/30 职场文书
2014年情人节活动方案
2014/02/16 职场文书
社区党员志愿服务活动方案
2014/08/18 职场文书
诉讼代理人授权委托书
2014/10/11 职场文书
电影地道战观后感
2015/06/04 职场文书
常住证明范本
2015/06/23 职场文书
婚礼嘉宾致辞
2015/07/28 职场文书
2019大学毕业晚会主持词
2019/06/21 职场文书
html+css合并表格边框的示例代码
2021/03/31 HTML / CSS
详解Laravel框架的依赖注入功能
2021/05/27 PHP
Golang日志包的使用
2022/04/20 Golang
Flutter Navigator 实现路由传递参数
2022/04/22 Java/Android
分享很少见很有用的SQL功能CORRESPONDING
2022/08/05 MySQL