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 相关文章推荐
用js生产批量批处理执行命令
Jul 28 Javascript
写给想学习Javascript的朋友一点学习经验小结
Nov 23 Javascript
利用jquery的获取JS文件中的字符串内容
Feb 14 Javascript
JavaScript中自定义事件用法分析
Dec 23 Javascript
JavaScript实现级联菜单的方法
Jun 29 Javascript
JS处理json日期格式化问题
Oct 01 Javascript
BootStrap中的表单大全
Sep 07 Javascript
JavaScript利用闭包实现模块化
Jan 13 Javascript
jQuery图片瀑布流的简单实现代码
Mar 15 Javascript
JavaScript实现获取用户单击body中所有A标签内容的方法
Jun 05 Javascript
微信小程序Echarts图表组件使用方法详解
Jun 25 Javascript
Vue实现腾讯云点播视频上传功能的实现代码
Aug 17 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
国王的咖啡这么大来头,名字的由来是什么
2021/03/03 咖啡文化
php使HTML标签自动补全闭合函数代码
2012/10/04 PHP
php实现SAE上使用storage上传与下载文件的方法
2015/06/29 PHP
PDO::setAttribute讲解
2019/01/29 PHP
thinkPHP+mysql+ajax实现的仿百度一下即时搜索效果详解
2019/07/15 PHP
基于jquery的tab切换 js原理
2010/04/01 Javascript
javascript复制对象使用说明
2011/06/28 Javascript
仿微博字符限制效果实现代码
2012/04/20 Javascript
jquery dialog open后,服务器端控件失效的快速解决方法
2013/12/19 Javascript
js实现的复制兼容chrome和IE
2014/04/03 Javascript
javascript面向对象之this关键词用法分析
2015/01/13 Javascript
JS控制表格实现一条光线流动分割行的方法
2015/03/09 Javascript
新手快速学习JavaScript免费教程资源汇总
2015/06/25 Javascript
深入探究AngularJS框架中Scope对象的超级教程
2016/01/04 Javascript
原生javascript实现addClass,removeClass,hasClass函数
2016/02/25 Javascript
jQuery中Ajax全局事件引用方式及各个事件(全局/局部)执行顺序
2016/06/02 Javascript
jQuery购物车插件jsorder用法(支持后台处理程序直接转换成DataTable处理)
2016/06/08 Javascript
JS实现无缝循环marquee滚动效果
2017/05/22 Javascript
node.js express中app.param的用法详解
2017/07/16 Javascript
Vuejs 2.0 子组件访问/调用父组件的方法(示例代码)
2018/02/08 Javascript
node.js 微信开发之定时获取access_token
2020/02/07 Javascript
Vue SSR 即时编译技术的实现
2020/05/06 Javascript
[51:06]2018DOTA2亚洲邀请赛3月29日 小组赛A组 KG VS Liquid
2018/03/30 DOTA
Python中尝试多线程编程的一个简明例子
2015/04/07 Python
python检测主机的连通性并记录到文件的实例
2018/06/21 Python
python实现微信防撤回神器
2019/04/29 Python
解决Python3用PIL的ImageFont输出中文乱码的问题
2019/08/22 Python
pandas 空数据处理方法详解
2019/11/02 Python
python中判断文件结束符的具体方法
2020/08/04 Python
python 线程的五个状态
2020/09/22 Python
用python计算文件的MD5值
2020/12/23 Python
canvas裁剪clip()函数的具体使用
2018/03/01 HTML / CSS
Wilson体育用品官网:美国著名运动器材品牌
2019/05/12 全球购物
Goodee官方商店:迷你投影仪
2021/03/15 全球购物
大学生村官事迹材料
2014/01/21 职场文书
萤火虫之墓观后感
2015/06/05 职场文书