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中巧用“闭包”实现程序的暂停执行功能
Apr 04 Javascript
这段js代码得节约你多少时间
Dec 20 Javascript
jQuery之Deferred对象详解
Sep 04 Javascript
Jquery时间轴特效(三种不同类型)
Nov 02 Javascript
jQuery自定义动画函数实例详解(附demo源码)
Dec 10 Javascript
微信小程序 图片加载(本地,网路)实例详解
Mar 10 Javascript
Vue props 单向数据流的实现
Nov 06 Javascript
JS动画实现回调地狱promise的实例代码详解
Nov 08 Javascript
利用Electron简单撸一个Markdown编辑器的方法
Jun 10 Javascript
javascript中undefined的本质解析
Jul 31 Javascript
Vue使用鼠标在Canvas上绘制矩形
Dec 24 Vue.js
Vue仿百度搜索功能
Dec 28 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
《Pokemon Sword·Shield》系列WEB动画《薄明之翼》第2话声优阵容公开!
2020/03/06 日漫
了解咖啡雨林联盟认证 什么是雨林认证 雨林认证是什么意思
2021/03/05 新手入门
php 文章采集正则代码
2009/12/28 PHP
两千行代码的PHP学习笔记汇总
2014/10/05 PHP
php使用simplexml_load_file加载XML文件并显示XML的方法
2015/03/19 PHP
php+ajax实现无刷新分页
2015/11/18 PHP
PHP7新增运算符用法实例分析
2016/09/26 PHP
PHP微信PC二维码登陆的实现思路
2017/07/13 PHP
YII2框架使用控制台命令的方法分析
2020/03/18 PHP
不错的asp中显示新闻的功能
2006/10/13 Javascript
javascript 写类方式之三
2009/07/05 Javascript
IE6、IE7中获取Button元素的值的bug说明
2011/08/28 Javascript
js动态在form上插入enctype=multipart/form-data的问题
2012/05/24 Javascript
node-webkit打包成exe文件被360误报木马的解决方法
2015/03/11 Javascript
基于javascript实现checkbox复选框实例代码
2016/01/28 Javascript
Bootstrap入门书籍之(五)导航条、分页导航
2016/02/17 Javascript
JavaScript实现时钟滴答声效果
2017/01/29 Javascript
vuejs绑定class和style样式
2017/04/11 Javascript
详解vue2.0脚手架的webpack 配置文件分析
2017/05/27 Javascript
Vue实现virtual-dom的原理简析
2017/07/10 Javascript
vue-cli的eslint相关用法
2017/09/29 Javascript
用React实现一个完整的TodoList的示例代码
2017/10/30 Javascript
Vue 源码分析之 Observer实现过程
2018/03/29 Javascript
javascript对HTML字符转义与反转义
2018/12/13 Javascript
Vue常用的全选/反选的示例代码
2020/02/19 Javascript
[00:21]DOTA2亚洲邀请赛 Logo演绎
2015/02/07 DOTA
python实现下载整个ftp目录的方法
2017/01/17 Python
利用pandas将numpy数组导出生成excel的实例
2018/06/14 Python
Python语言快速上手学习方法
2018/12/14 Python
使用 Visual Studio Code(VSCode)搭建简单的Python+Django开发环境的方法步骤
2018/12/17 Python
python使用 cx_Oracle 模块进行查询操作示例
2019/11/28 Python
Python双链表原理与实现方法详解
2020/02/22 Python
Python中的With语句的使用及原理
2020/07/29 Python
亿阳信通股份有限公司笔试题(C#)
2016/03/04 面试题
大学生学习2014全国两会心得体会
2014/03/13 职场文书
比赛主持人开场白
2015/05/29 职场文书