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编写COM组件的步骤
Mar 17 Javascript
js loading加载效果实现代码
Nov 24 Javascript
浏览器加载、渲染和解析过程黑箱简析
Nov 29 Javascript
使用JavaScript实现ajax的实例代码
May 11 Javascript
jquery获取easyui日期控件的值实现方法
Nov 09 Javascript
vue Render中slots的使用的实例代码
Jul 19 Javascript
Vue中的Vux配置指南
Dec 08 Javascript
angularJS的radio实现单项二选一的使用方法
Feb 28 Javascript
LayerClose弹窗关闭刷新方法
Aug 17 Javascript
微信小程序可滑动周日历组件使用详解
Oct 21 Javascript
在vue中使用回调函数,this调用无效的解决
Aug 11 Javascript
Vue router传递参数并解决刷新页面参数丢失问题
Dec 02 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 之入门篇
2006/12/04 PHP
PHP nl2br函数 将换行字符转成 <br>
2009/08/21 PHP
PHP保留两位小数并且四舍五入及不四舍五入的方法
2013/09/22 PHP
php中实现精确设置session过期时间的方法
2014/07/17 PHP
浅谈php中include文件变量作用域
2015/06/18 PHP
php实现的pdo公共类定义与用法示例
2017/07/19 PHP
javascript eval函数深入认识
2009/02/21 Javascript
有趣的javascript数组定义方法
2010/09/10 Javascript
30个经典的jQuery代码开发技巧
2014/12/15 Javascript
DOM基础教程之模型中的模型节点
2015/01/19 Javascript
高效的jquery数字滚动特效
2015/12/17 Javascript
js仿支付宝多方框输入支付密码效果
2016/09/27 Javascript
浅谈js数组和splice的用法
2016/12/04 Javascript
js实现PC端根据IP定位当前城市地理位置
2017/02/22 Javascript
Angular.JS中指令ng-if的注意事项小结
2017/06/21 Javascript
基于JSON数据格式详解
2017/08/31 Javascript
react-native fetch的具体使用方法
2017/11/01 Javascript
详解Vue改变数组中对象的属性不重新渲染View的解决方案
2018/09/21 Javascript
vscode中的vue项目报错Property ‘xxx‘ does not exist on type ‘CombinedVueInstance<{ readyOnly...Vetur(2339)
2020/09/11 Javascript
JavaScript实现无限轮播效果
2020/11/19 Javascript
Python使用scrapy抓取网站sitemap信息的方法
2015/04/08 Python
python中日志logging模块的性能及多进程详解
2017/07/18 Python
使用paramiko远程执行命令、下发文件的实例
2017/10/01 Python
详解Python基础random模块随机数的生成
2019/03/23 Python
Python argparse模块应用实例解析
2019/11/15 Python
Python sorted排序方法如何实现
2020/03/31 Python
详解Python 中的容器 collections
2020/08/17 Python
CSS3五个技巧给你的网站带来出色的效果
2009/04/02 HTML / CSS
特罗佩亚包官方网站:Tropea
2017/01/03 全球购物
德国最大的婴儿用品网上商店:Kidsroom.de(支持中文)
2020/09/02 全球购物
法律专业自我鉴定
2013/10/03 职场文书
电子商务应届生自我鉴定
2014/01/13 职场文书
赔偿协议书范本
2014/09/12 职场文书
2015年教师新年寄语
2014/12/08 职场文书
JavaScript如何利用Promise控制并发请求个数
2021/05/14 Javascript
python 如何将两个实数矩阵合并为一个复数矩阵
2021/05/19 Python