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 相关文章推荐
jQuery使用动态渲染表单功能完成ajax文件下载
Jan 15 Javascript
js拦截alert对话框另类应用
Jan 16 Javascript
jQuery jcrop插件截图使用方法
Nov 20 Javascript
jquery预览图片实现鼠标放上去显示实际大小
Jan 16 Javascript
js获取当前页面的url网址信息
Jun 12 Javascript
浅谈JavaScript字符串与数组
Jun 03 Javascript
JS提示:Uncaught SyntaxError:Unexpected token ) 错误的解决方法
Aug 19 Javascript
WEB 前端开发中防治重复提交的实现方法
Oct 26 Javascript
详解jQuery lazyload 懒加载
Dec 19 Javascript
vue使用iframe嵌入网页的示例代码
Jun 09 Javascript
JavaScript字符串处理常见操作方法小结
Nov 15 Javascript
Openlayers绘制聚合标注
Sep 28 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
关于JSON以及JSON在PHP中的应用技巧
2013/11/27 PHP
PHP 设计模式系列之 specification规格模式
2016/01/10 PHP
基于PHP+mysql实现新闻发布系统的开发
2020/08/06 PHP
Prototype使用指南之selector.js说明
2008/10/26 Javascript
EXT中xtype的含义分析
2010/01/07 Javascript
JS打开层/关闭层/移动层动画效果的实例代码
2013/05/11 Javascript
AngularJS ng-bind-html 指令详解及实例代码
2016/07/30 Javascript
使用JavaScript为一张图片设置备选路径的方法
2017/01/04 Javascript
浅谈JavaScript中promise的使用
2017/01/11 Javascript
详解在Vue中如何使用axios跨域访问数据
2017/07/07 Javascript
VueJs单页应用实现微信网页授权及微信分享功能示例
2017/07/26 Javascript
vue.js中proxyTable 转发请求的实现方法
2018/09/20 Javascript
浅谈Angular7 项目开发总结
2018/12/19 Javascript
Angular6 用户自定义标签开发的实现方法
2019/01/08 Javascript
vue组件中watch props根据v-if动态判断并挂载DOM的问题
2019/05/12 Javascript
Vue + Element UI图片上传控件使用详解
2019/08/20 Javascript
刷新页面后让控制台的js代码继续执行
2019/09/20 Javascript
JavaScript 变量,数据类型基础实例详解【变量、字符串、数组、对象等】
2020/01/04 Javascript
JS window对象简单操作完整示例
2020/01/14 Javascript
easyUI 实现的后台分页与前台显示功能示例
2020/06/01 Javascript
javascript实现前端成语点击验证
2020/06/24 Javascript
vue相同路由跳转强制刷新该路由组件操作
2020/08/05 Javascript
浅析JavaScript 函数柯里化
2020/09/08 Javascript
vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作
2020/09/10 Javascript
Python对数据库操作
2016/03/28 Python
tf.truncated_normal与tf.random_normal的详细用法
2018/03/05 Python
解决Pycharm 导入其他文件夹源码的2种方法
2020/02/12 Python
Python3 mmap内存映射文件示例解析
2020/03/23 Python
幼师自荐信范文
2013/10/06 职场文书
违反校纪校规检讨书
2014/02/15 职场文书
电子工程专业毕业生求职信
2014/03/14 职场文书
亮剑精神演讲稿
2014/05/23 职场文书
小学运动会前导词
2015/07/20 职场文书
Python办公自动化之Excel(中)
2021/05/24 Python
MYSQL(电话号码,身份证)数据脱敏的实现
2021/05/28 MySQL
Python如何用re模块实现简易tokenizer
2022/05/02 Python