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 相关文章推荐
在textarea文本域中显示HTML代码的方法
Mar 06 Javascript
jquery提取元素里的纯文本不包含span等里的内容
Sep 30 Javascript
JS对img标签进行优化使用onerror显示默认图像
Apr 24 Javascript
Backbone.js中的集合详解
Jan 14 Javascript
JavaScript数组复制详解
Feb 02 Javascript
JavaScript字符串转数字的5种方法及遇到的坑
Jul 16 Javascript
微信小程序生成二维码的示例代码
Mar 29 Javascript
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
Apr 28 jQuery
详解vue 路由跳转四种方式 (带参数)
Apr 28 Javascript
vue项目部署到nginx/tomcat服务器的实现
Aug 26 Javascript
vue+elementui 实现新增和修改共用一个弹框的完整代码
Jun 08 Vue.js
JavaScript中时间格式化新思路toLocaleString()
Nov 07 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
深入解析Session是否必须依赖Cookie
2013/08/02 PHP
php5对象复制、clone、浅复制与深复制实例详解
2019/08/14 PHP
用Javascript实现Windows任务管理器的代码
2012/03/27 Javascript
jQuery实现不断闪烁文字的方法
2015/05/15 Javascript
简介JavaScript中的setDate()方法的使用
2015/06/11 Javascript
不依赖Flash和任何JS库实现文本复制与剪切附源码下载
2015/10/09 Javascript
浅谈bootstrap源码分析之scrollspy(滚动侦听)
2016/06/06 Javascript
ES6学习笔记之Set和Map数据结构详解
2017/04/07 Javascript
通过js修改input、select默认字体颜色
2017/04/19 Javascript
nodejs结合Socket.IO实现的即时通讯功能详解
2018/01/12 NodeJs
VUE2 前端实现 静态二级省市联动选择select的示例
2018/02/09 Javascript
详解vue使用$http服务端收不到参数
2019/04/19 Javascript
vue 路由子组件created和mounted不起作用的解决方法
2019/11/05 Javascript
Jquery $.map使用方法实例详解
2020/09/01 jQuery
Python isinstance判断对象类型
2008/09/06 Python
使用Python将数组的元素导出到变量中(unpacking)
2016/10/27 Python
基于python中pygame模块的Linux下安装过程(详解)
2017/11/09 Python
基于Python中capitalize()与title()的区别详解
2017/12/09 Python
python3写爬取B站视频弹幕功能
2017/12/22 Python
如何在python字符串中输入纯粹的{}
2018/08/22 Python
Python3实现获取图片文字里中文的方法分析
2018/12/13 Python
用Python+OpenCV对比图像质量的几种方法
2019/07/15 Python
Keras使用tensorboard显示训练过程的实例
2020/02/15 Python
Python的Django框架实现数据库查询(不返回QuerySet的方法)
2020/05/19 Python
传统HTML页面实现模块化加载的方法
2018/10/15 HTML / CSS
波兰补充商店:Muscle Power
2018/10/29 全球购物
山海经纬软件测试笔试题和面试题
2013/04/02 面试题
建筑实习自我鉴定
2013/10/18 职场文书
2014年最新大专生职业生涯规划书范文
2014/09/13 职场文书
销售员试用期自我评价
2014/09/15 职场文书
大学生个人学习总结
2015/02/15 职场文书
丧事酒宴答谢词
2015/09/30 职场文书
责任书格式
2019/04/18 职场文书
解决golang 关于全局变量的坑
2021/05/06 Golang
Java中多线程下载图片并压缩能提高效率吗
2021/07/01 Java/Android
一行Python命令实现批量加水印
2022/04/07 Python