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 css样式操作代码(批量操作)
Oct 09 Javascript
滚动条变色 隐藏滚动条与双击网页自动滚屏显示代码
Dec 28 Javascript
jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析
Jun 09 Javascript
node.js中的emitter.on方法使用说明
Dec 10 Javascript
js带前后翻页的图片切换效果代码分享
Sep 08 Javascript
vue,angular,avalon这三种MVVM框架优缺点
Apr 27 Javascript
微信小程序 出现错误:{"baseresponse":{"errcode":-80002,"errmsg":""}}解决办法
Feb 23 Javascript
浅谈 vue 中的 watcher
Dec 04 Javascript
angularjs实现的购物金额计算工具示例
May 08 Javascript
使用webpack编译es6代码的方法步骤
Apr 28 Javascript
Node.js学习教程之Module模块
Sep 03 Javascript
Vue使用axios引起的后台session不同操作
Aug 14 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+MySQL的聊天室设计
2006/10/09 PHP
php中url传递中文字符,特殊危险字符的解决方法
2013/08/17 PHP
PHP邮箱验证示例教程
2016/06/01 PHP
THINKPHP3.2使用soap连接webservice的解决方法
2017/12/13 PHP
网页里控制图片大小的相关代码
2006/06/25 Javascript
javascript 获取元素位置的快速方法 getBoundingClientRect()
2009/11/26 Javascript
AJAX 网页保留浏览器前进后退等功能
2011/02/12 Javascript
快速解决jquery之get缓存问题的最简单方法介绍
2013/12/19 Javascript
AngularJS 使用 UI Router 实现表单向导
2016/01/29 Javascript
获取阴历(农历)和当前日期的js代码
2016/02/15 Javascript
深入理解JS中的substr和substring
2016/04/26 Javascript
深入理解JavaScript中为什么string可以拥有方法
2016/05/24 Javascript
jQuery实现的简单悬浮层功能完整实例
2017/01/23 Javascript
jQuery鼠标移动图片上实现放大效果
2017/06/25 jQuery
javascript按顺序加载运行js方法
2017/12/01 Javascript
解决vue单页使用keep-alive页面返回不刷新的问题
2018/03/13 Javascript
[04:46]2018年度玩家喜爱的电竞媒体-完美盛典
2018/12/16 DOTA
快速入门python学习笔记
2017/12/06 Python
python使用pygame框架实现推箱子游戏
2018/11/20 Python
在Python函数中输入任意数量参数的实例
2019/07/16 Python
python实现本地批量ping多个IP的方法示例
2019/08/07 Python
python实现小程序推送页面收录脚本
2020/04/20 Python
Python基于模块Paramiko实现SSHv2协议
2020/04/28 Python
Django在Model保存前记录日志实例
2020/05/14 Python
pycharm软件实现设置自动保存操作
2020/06/08 Python
彪马俄罗斯官网:PUMA俄罗斯
2019/07/13 全球购物
自荐书封面下载
2013/11/29 职场文书
高三体育教学反思
2014/01/29 职场文书
西湖英语导游词
2015/02/06 职场文书
工作保证书怎么写
2015/02/28 职场文书
干货:我将这样书写我的演讲稿!
2019/05/09 职场文书
导游词之镜泊湖
2019/12/09 职场文书
python的netCDF4批量处理NC格式文件的操作方法
2022/03/21 Python
Python利用Turtle绘制哆啦A梦和小猪佩奇
2022/04/04 Python
python 单机五子棋对战游戏
2022/04/28 Python
Python使用pyecharts控件绘制图表
2022/06/05 Python