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圆形浮动菜单特效代码
Mar 03 Javascript
新手常遇到的一些jquery问题整理
Aug 16 Javascript
JQuery中阻止事件冒泡几种方式及其区别介绍
Jan 15 Javascript
jQuery控制TR显示隐藏的几种方法
Jun 18 Javascript
JS简单实现仿百度控制台输出信息效果
Sep 04 Javascript
用AngularJS来实现监察表单按钮的禁用效果
Nov 02 Javascript
ES6新特性之变量和字符串用法示例
Apr 01 Javascript
JS设计模式之单例模式(一)
Sep 29 Javascript
JavaScript实现的前端AES加密解密功能【基于CryptoJS】
Aug 28 Javascript
Node.js Buffer模块功能及常用方法实例分析
Jan 05 Javascript
vue自动路由-单页面项目(非build时构建)
Apr 30 Javascript
electron踩坑之dialog中的callback解决
Oct 06 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
thinkphp四种url访问方式详解
2014/11/28 PHP
PHP使用GETDATE获取当前日期时间作为一个关联数组的方法
2015/03/19 PHP
ThinkPHP实现递归无级分类――代码少
2015/07/29 PHP
解决jquery .ajax 在IE下卡死问题的解决方法
2009/10/26 Javascript
JavaScript返回0-1之间随机数的方法
2015/04/06 Javascript
AngularJS实现分页显示数据库信息
2016/07/01 Javascript
工厂模式在JS中的实践
2017/01/18 Javascript
vue.js移动端app实战1:初始配置详解
2017/07/24 Javascript
angular中实现li或者某个元素点击变色的两种方法
2017/07/27 Javascript
微信小程序显示下拉列表功能【附源码下载】
2017/12/12 Javascript
在vue中实现给每个页面顶部设置title
2020/07/29 Javascript
合并Excel工作薄中成绩表的VBA代码,非常适合教育一线的朋友
2009/04/09 Python
Python多线程编程(六):可重入锁RLock
2015/04/05 Python
Python常用随机数与随机字符串方法实例
2015/04/09 Python
Python自动重试HTTP连接装饰器
2015/04/28 Python
Python操作Word批量生成文章的方法
2015/07/28 Python
Python中的with语句与上下文管理器学习总结
2016/06/28 Python
python实现各种插值法(数值分析)
2019/07/30 Python
Python3实现mysql连接和数据框的形成(实例代码)
2020/01/17 Python
对pytorch的函数中的group参数的作用介绍
2020/02/18 Python
Python生成器next方法和send方法区别详解
2020/05/30 Python
英国最大的宝石首饰超市:QP Jewellers
2018/09/23 全球购物
eBay瑞士购物网站:eBay.ch
2018/12/24 全球购物
Armor Lux法国官方网站:水手服装、成衣和内衣
2020/05/26 全球购物
什么是lambda函数
2013/09/17 面试题
中学生团员自我评价分享
2013/12/07 职场文书
销售工作岗位职责
2013/12/24 职场文书
小学生新学期寄语
2014/01/19 职场文书
石油大学毕业生自荐信
2014/01/28 职场文书
批评与自我批评材料
2014/02/15 职场文书
幼儿园中班教师寄语
2014/04/03 职场文书
班长竞选演讲稿
2014/04/24 职场文书
陈胜吴广起义口号
2014/06/20 职场文书
简历自荐信范文
2015/03/09 职场文书
校运会广播稿
2015/08/19 职场文书
SQLServer RANK() 排名函数的使用
2022/03/23 SQL Server