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 相关文章推荐
onsubmit阻止form表单提交与onclick的相关操作
Sep 03 Javascript
jquery实现可拖动DIV自定义保存到数据的实例
Nov 20 Javascript
javascript函数自动执行常用方法汇总
Mar 28 Javascript
js 基础篇必看(点击事件轮播图的简单实现)
Aug 20 Javascript
jQGrid动态填充select下拉框的选项值(动态填充)
Nov 28 Javascript
jquery+css实现下拉列表功能
Sep 03 jQuery
Windows下Node.js安装及环境配置方法
Sep 18 Javascript
详解Vue调用手机相机和相册以及上传
May 05 Javascript
vue项目中运用webpack动态配置打包多种环境域名的方法
Jun 24 Javascript
JS实现返回上一页并刷新页面的方法分析
Jul 16 Javascript
JS对象属性的检测与获取操作实例分析
Mar 17 Javascript
Vue axios 跨域请求无法带上cookie的解决
Sep 08 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
PHILIPS L4X25T电路分析和打理
2021/03/02 无线电
PHP逐行输出(ob_flush与flush的组合)
2012/02/04 PHP
PHP扩展程序实现守护进程
2015/04/16 PHP
详解php语言最牛掰的Laravel框架
2017/11/20 PHP
PHP大文件切割上传功能实例分析
2019/07/01 PHP
Laravel5.1 框架控制器基础用法实例分析
2020/01/04 PHP
跟我一起学写jQuery插件开发方法(附完整实例及下载)
2010/04/01 Javascript
为什么要在引入的css或者js文件后面加参数的详细讲解
2013/05/03 Javascript
jquery获取子节点和父节点的示例代码
2013/09/10 Javascript
javascript贪吃蛇完整版(源码)
2013/12/09 Javascript
javascript实现表格排序 编辑 拖拽 缩放
2015/01/02 Javascript
javascript实现检验的各种规则
2015/07/31 Javascript
AngularJS入门教程之过滤器用法示例
2016/11/02 Javascript
快速解决bootstrap下拉菜单无法隐藏的问题
2018/08/10 Javascript
jQuery实现的五星点评功能【案例】
2019/02/18 jQuery
wxPython窗口中文乱码解决方法
2014/10/11 Python
Python实现导出数据生成excel报表的方法示例
2017/07/12 Python
对python中array.sum(axis=?)的用法介绍
2018/06/28 Python
解决pyinstaller打包发布后的exe文件打开控制台闪退的问题
2019/06/21 Python
python自动化测试之DDT数据驱动的实现代码
2019/07/23 Python
Python中print函数简单使用总结
2019/08/05 Python
pycharm设置默认的UTF-8编码模式的方法详解
2020/06/01 Python
Python应用实现处理excel数据过程解析
2020/06/19 Python
Django限制API访问频率常用方法解析
2020/10/12 Python
纯html5+css3下拉导航菜单实现代码
2013/03/18 HTML / CSS
英国著名书店:Foyles
2018/12/01 全球购物
匡威英国官网:Converse英国
2018/12/02 全球购物
方正Java笔试题
2014/07/03 面试题
幼儿园家长评语
2014/02/10 职场文书
创建省级文明单位实施方案
2014/02/27 职场文书
应届生面试求职信
2014/07/02 职场文书
乡镇创先争优活动总结
2014/08/28 职场文书
南京大屠杀观后感
2015/06/02 职场文书
物资采购管理制度
2015/08/06 职场文书
Python-OpenCV教程之图像的位运算详解
2021/06/21 Python
Python使用pyecharts控件绘制图表
2022/06/05 Python