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 相关文章推荐
IE之动态添加DOM节点触发window.resize事件
Jul 27 Javascript
计算新浪Weibo消息长度(还可以输入119字)
Jul 02 Javascript
Javascript设计模式之观察者模式的多个实现版本实例
Mar 03 Javascript
Javascript中实现String.startsWith和endsWith方法
Jun 10 Javascript
JavaScript中Math.SQRT2属性的使用详解
Jun 14 Javascript
12种JavaScript常用的MVC框架比较分析
Nov 16 Javascript
vue中element-ui表格缩略图悬浮放大功能的实例代码
Jun 26 Javascript
微信小程序实现点赞、取消点赞功能
Nov 02 Javascript
原生JS实现逼真的图片3D旋转效果详解
Feb 16 Javascript
bootstrap table插件动态加载表头
Jul 19 Javascript
Vue中key的作用示例代码详解
Jun 10 Javascript
在vue中使用inheritAttrs实现组件的扩展性介绍
Dec 07 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
使用php来实现网络服务
2009/09/15 PHP
PHP OPCode缓存 APC详细介绍
2010/10/12 PHP
解析MySql与Java的时间类型
2013/06/22 PHP
PHP二维数组排序的3种方法和自定义函数分享
2014/04/09 PHP
XHProf报告字段含义的解析
2016/05/17 PHP
php数据库操作model类(使用__call方法)
2016/11/16 PHP
PHP使用文件锁解决高并发问题示例
2018/03/29 PHP
php分享朋友圈的实现代码
2019/02/18 PHP
javascript 动态修改样式和层叠样式表代码
2010/04/27 Javascript
js 设置选中行的样式的实现代码
2010/05/24 Javascript
深入理解JavaScript系列(2) 揭秘命名函数表达式
2012/01/15 Javascript
jQuery获得页面元素的绝对/相对位置即绝对X,Y坐标
2014/03/06 Javascript
JavaScript调试技巧之console.log()详解
2014/03/19 Javascript
使用jquery修改表单的提交地址基本思路
2014/06/04 Javascript
jfreechart插件将数据展示成饼状图、柱状图和折线图
2015/04/13 Javascript
JS实现简单的键盘打字的效果
2015/04/24 Javascript
jquery 重写 ajax提交并判断权限后 使用load方法报错解决方法
2016/01/19 Javascript
bootstrap快速制作后台界面
2016/12/05 Javascript
vue实现下拉加载其实没那么复杂
2019/08/13 Javascript
[02:22:36]《加油!DOTA》总决赛
2014/09/19 DOTA
初步讲解Python中的元组概念
2015/05/21 Python
微信跳一跳python自动代码解读1.0
2018/01/12 Python
python将控制台输出保存至文件的方法
2019/01/07 Python
Django单元测试工具test client使用详解
2019/08/02 Python
深入浅析Python科学计算库Scipy及安装步骤
2019/10/12 Python
浅谈多卡服务器下隐藏部分 GPU 和 TensorFlow 的显存使用设置
2020/06/30 Python
Python爬取股票信息,并可视化数据的示例
2020/09/26 Python
matplotlib bar()实现百分比堆积柱状图
2021/02/24 Python
详解Django中的FBV和CBV对比分析
2021/03/01 Python
The Hut英国:英国领先的豪华在线百货商店
2019/07/26 全球购物
励志演讲稿大全
2014/08/21 职场文书
2015年全国科普日活动总结
2015/03/23 职场文书
《云雀的心愿》教学反思
2016/02/23 职场文书
mysql 如何获取两个集合的交集/差集/并集
2021/06/08 MySQL
在Java中Collection的一些常用方法总结
2021/06/13 Java/Android
css布局巧妙技巧之css三角示例的运用
2022/03/16 HTML / CSS