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 相关文章推荐
javascript面向对象编程(一) 实例代码
Jun 25 Javascript
Ubuntu 11.10 安装Node.js的方法
Nov 30 Javascript
jquery如何实现在加载完iframe的内容后再进行操作
Sep 10 Javascript
jquery左边浮动到一定位置时显示返回顶部按钮
Jun 05 Javascript
网页右下角弹出窗体实现代码
Jun 05 Javascript
jquery+ajax+text文本框实现智能提示完整实例
Jul 09 Javascript
详解wow.js中各种特效对应的类名
Sep 13 Javascript
浅谈ng-zorro使用心得
Dec 03 Javascript
关于微信小程序登录的那些事
Jan 08 Javascript
关于Layui Table隐藏列问题
Sep 16 Javascript
Nuxt的路由动画效果案例
Nov 06 Javascript
Vue实现tab导航栏并支持左右滑动功能
Jun 28 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
laravel中短信发送验证码的实现方法
2018/04/25 PHP
jQuery控制图片的hover效果(smartRollover.js)
2012/03/18 Javascript
javascript动画浅析
2012/08/30 Javascript
js模拟hashtable的简单实例
2014/03/06 Javascript
jQuery基于当前元素进行下一步的遍历
2014/05/20 Javascript
js变量、作用域及内存详解
2014/09/23 Javascript
Nodejs实现多人同时在线移动鼠标的小游戏分享
2014/12/06 NodeJs
浅析AMD CMD CommonJS规范--javascript模块化加载学习心得总结
2016/03/16 Javascript
Angular2从搭建环境到开发步骤详解
2016/10/17 Javascript
jQuery实现动态添加、删除按钮及input输入框的方法
2017/04/27 jQuery
jQuery制作input提示内容(兼容IE8以上)
2017/07/05 jQuery
vue.js国际化 vue-i18n插件的使用详解
2017/07/07 Javascript
Bootstrap弹出框之自定义悬停框标题、内容和样式示例代码
2017/07/11 Javascript
nodejs微信开发之授权登录+获取用户信息
2019/03/17 NodeJs
Bootstrap实现省市区三级联动(亲测可用)
2019/07/26 Javascript
Vue.js自定义指令学习使用详解
2019/10/19 Javascript
JS实现悬浮球只在一侧滑动并且是横屏状态下
2020/08/19 Javascript
python中pandas.DataFrame的简单操作方法(创建、索引、增添与删除)
2017/03/12 Python
Python采集代理ip并判断是否可用和定时更新的方法
2018/05/07 Python
详解Python Matplot中文显示完美解决方案
2019/03/07 Python
Python实现平行坐标图的两种方法小结
2019/07/04 Python
django实现后台显示媒体文件
2020/04/07 Python
python实现扫雷游戏的示例
2020/10/20 Python
Python模块常用四种安装方式
2020/10/20 Python
C++:局部变量能否和全局变量重名
2014/03/03 面试题
党的群众路线教育实践活动心得体会900字
2014/03/07 职场文书
2014年感恩母亲演讲稿
2014/05/27 职场文书
奥巴马经典演讲稿
2014/09/13 职场文书
党员个人年度总结
2015/02/14 职场文书
感恩教育观后感
2015/06/17 职场文书
2016年最美孝心少年事迹材料
2016/02/26 职场文书
解析redis hash应用场景和常用命令
2021/08/04 Redis
详解Redis在SpringBoot工程中的综合应用
2021/10/16 Redis
CPU不支持Windows11系统怎么办
2021/11/21 数码科技
MySQL限制查询和数据排序介绍
2022/03/25 MySQL
mysql 子查询的使用
2022/04/28 MySQL