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 EasyUI API 中文文档 - NumberSpinner数值微调器使用介绍
Oct 21 Javascript
JS 实现获取打开一个界面中输入的值
Mar 19 Javascript
jQuery模拟超链接点击效果代码
Apr 21 Javascript
Blocksit插件实现瀑布流数据无限( 异步)加载
Jun 20 Javascript
鼠标经过子元素触发mouseout,mouseover事件的解决方案
Jul 26 Javascript
快速掌握Node.js环境的安装与运行方法
Feb 16 Javascript
jQuery插件passwordStrength密码强度指标详解
Jun 24 Javascript
Vue组件tree实现树形菜单
Apr 13 Javascript
Vue.js框架路由使用方法实例详解
Aug 25 Javascript
vuex state及mapState的基础用法详解
Apr 19 Javascript
详解ES6 Promise的生命周期和创建
Aug 18 Javascript
js实现无限瀑布流实例方法
Sep 16 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操作XML、读取数据和写入数据的实现代码
2014/08/15 PHP
php找出指定范围内回文数且平方根也是回文数的方法
2015/03/23 PHP
PHP之正则表达式捕获组与非捕获组(详解)
2015/07/29 PHP
深入浅析php中sprintf与printf函数的用法及区别
2016/01/08 PHP
3种方法轻松处理php开发中emoji表情的问题
2016/07/18 PHP
php中file_get_contents()函数用法实例
2019/02/21 PHP
PHP5中使用mysqli的prepare操作数据库的介绍
2019/03/18 PHP
PHP延迟静态绑定使用方法实例解析
2020/09/05 PHP
键盘KeyCode值列表汇总
2013/11/26 Javascript
jQuery实现根据类型自动显示和隐藏表单
2015/03/18 Javascript
JavaScript截取指定长度字符串点击可以展开全部代码
2015/12/04 Javascript
node.js中express中间件body-parser的介绍与用法详解
2017/05/23 Javascript
EasyUI框架 使用Ajax提交注册信息的实现代码
2017/09/27 Javascript
解决vue 界面在苹果手机上滑动点击事件等卡顿问题
2018/11/27 Javascript
layui插件表单验证提交触发提交的例子
2019/09/09 Javascript
JavaScript实现捕获鼠标坐标
2020/04/12 Javascript
python实现dict版图遍历示例
2014/02/19 Python
使用Python的Tornado框架实现一个一对一聊天的程序
2015/04/25 Python
Python 含参构造函数实例详解
2017/05/25 Python
pygame 精灵的行走及二段跳的实现方法(必看篇)
2017/07/10 Python
Python中的CSV文件使用"with"语句的方式详解
2018/10/16 Python
python根据txt文本批量创建文件夹
2020/12/08 Python
python爬虫 2019中国好声音评论爬取过程解析
2019/08/26 Python
python request 模块详细介绍
2020/11/10 Python
英国发展最快的在线超市之一:Click Marketplace
2021/02/15 全球购物
你所在的项目是如何确定版本号的
2015/12/28 面试题
物业招聘计划书
2014/01/10 职场文书
法学函授自我鉴定
2014/02/06 职场文书
学校运动会霸气口号
2014/06/07 职场文书
行政部经理助理岗位职责
2014/06/15 职场文书
元旦趣味活动方案
2014/08/22 职场文书
民主评议党员个人自我评价
2015/03/03 职场文书
寒假社会实践个人总结
2015/03/06 职场文书
2015年工程部工作总结
2015/04/30 职场文书
智慧人生:永远不需要向任何人解释你自己
2019/08/20 职场文书
Python 如何利用ffmpeg 处理视频素材
2021/11/27 Python