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 个人笔记(没有整理,很乱)
Jul 07 Javascript
屏蔽script注入小例子
Nov 12 Javascript
node.js中的console.error方法使用说明
Dec 10 Javascript
移动端滑动插件Swipe教程
Oct 16 Javascript
浅谈jquery选择器 :first与:first-child的区别
Nov 20 Javascript
Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)
May 30 Javascript
详解Vue.js搭建路由报错 router.map is not a function
Jun 27 Javascript
Vue中的slot使用插槽分发内容的方法
Mar 01 Javascript
使vue实现jQuery调用的两种方法
May 12 jQuery
vue.js表单验证插件(vee-validate)的使用教程详解
May 23 Javascript
vue 解决遍历对象显示的顺序不对问题
Nov 07 Javascript
小程序开发之模态框组件封装
Apr 23 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
PHP使用JSON和将json还原成数组
2015/02/12 PHP
PHP进程同步代码实例
2015/02/12 PHP
详解WordPress开发中get_header()获取头部函数的用法
2016/01/08 PHP
php常用数组array函数实例总结【赋值,拆分,合并,计算,添加,删除,查询,判断,排序】
2016/12/07 PHP
php连接MSsql server的五种方法总结
2018/03/04 PHP
php微信公众号开发之简答题
2018/10/20 PHP
在网页中控制wmplayer播放器
2006/07/01 Javascript
javascript基本语法分析说明
2008/06/15 Javascript
使用原生javascript创建通用表单验证——更锋利的使用dom对象
2011/09/13 Javascript
JS动态插入并立即执行回调函数的方法
2016/04/21 Javascript
bootstrap读书笔记之CSS组件(上)
2016/10/17 Javascript
jQuery点击弹出层弹出模态框点击模态框消失代码分享
2017/01/21 Javascript
折叠菜单及选择器的运用
2017/02/03 Javascript
windows下vue.js开发环境搭建教程
2017/03/20 Javascript
页面间固定参数,通过cookie传值的实现方法
2017/05/31 Javascript
浅谈angular.copy() 深拷贝
2017/09/14 Javascript
详解npm 配置项registry修改为淘宝镜像
2018/09/07 Javascript
Vue2.0实现简单分页及跳转效果
2019/07/29 Javascript
封装微信小程序http拦截器过程解析
2019/08/13 Javascript
JS数据类型判断的几种常用方法
2020/07/07 Javascript
解决vue项目axios每次请求session不一致的问题
2020/10/24 Javascript
nodejs中的异步编程知识点详解
2021/01/17 NodeJs
Python使用代理抓取网站图片(多线程)
2014/03/14 Python
基于python时间处理方法(详解)
2017/08/14 Python
Python实现自动上京东抢手机
2018/02/06 Python
Python计算一个给定时间点前一个月和后一个月第一天的方法
2018/05/29 Python
django-filter和普通查询的例子
2019/08/12 Python
python新式类和经典类的区别实例分析
2020/03/23 Python
在python中使用nohup命令说明
2020/04/16 Python
Python PyQt5模块实现窗口GUI界面代码实例
2020/05/12 Python
深入剖析webstorage[html5的本地数据处理]
2016/07/11 HTML / CSS
九年级语文教学反思
2014/02/04 职场文书
安全生产专项整治方案
2014/05/06 职场文书
理想演讲稿范文
2014/05/21 职场文书
公司授权委托书格式范文
2014/10/02 职场文书
Ruby使用Mysql2连接操作MySQL
2022/04/19 Ruby