jquery对Json的各种遍历方法总结(必看篇)


Posted in Javascript onSeptember 29, 2016

概述

JSON(javascript Object Notation) 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式。同时,JSON是 JavaScript 原生格式,这意味着在 JavaScript 中处理 JSON数据不须要任何特殊的 API 或工具包。

在JSON中,有两种结构:对象和数组。

1.对象

一个对象以“{”开始,“}”结束。每个“key”后跟一“:”,“‘key/value' 对”之间运用 “,”分隔。

packJson = {"name":"caibaojian.com", "password":"111"}

2.数组

packJson = [{"name":"caibaojian.com", "password":"111"}, {"name":"tony", "password":"111"}];

数组是值的有序集合。一个数组以“[”开始,“]”结束。值之间运用 “,”分隔。

JSON对象和JSON字符串的转换

在数据传输流程中,json是以文本,即字符串的形式传递的,而JS操作的是JSON对象,所以,JSON对象和JSON字符串之间的相互转换是关键。例如:

JSON字符串:

var jsonStr = '{"name":"caibaojian", "password":"1111"}';

JSON对象:

var jsonObj = {"name":"caibaojian.com", "password":"1111"};

1、String转换为Json对象

var jsonObj = eval('(' + jsonStr + ')');

2.Json对象转换为String字符串

var jsonStr = jsonObj.toJSONString();

jQuery遍历json对象

grep

<script type='text/javascript' src="/jquery.js"></script>
<script type="text/javascript">
$().ready(
function(){
var array = [1,2,3,4,5,6,7,8,9];
var filterarray = $.grep(array,function(value){
return value > 5;//筛选出大于5的
});
for(var i=0;i<filterarray.length;i++){
alert(filterarray[i]);
}
for (key in filterarray){
alert(filterarray[key]);
}
}
);
</script>

each

<script type='text/javascript' src="/jquery.js"></script>
<script type="text/javascript">
$().ready(
function(){
var anObject = {one:1,two:2,three:3};//对json数组each
$.each(anObject,function(name,value) {
alert(name);
alert(value);
});
var anArray = ['one','two','three'];
$.each(anArray,function(n,value){
alert(n);
alert(value);
}
);
}
);
</script>

inArray

<script type='text/javascript' src="/jquery.js"></script>
<script type="text/javascript">
$().ready(
function(){
var anArray = ['one','two','three'];
var index = $.inArray('two',anArray);
alert(index);//返回该值在数组中的键值,返回1
alert(anArray[index]);//value is two
}
);
</script>

map

<script type='text/javascript' src="/jquery.js"></script>
<script type="text/javascript">
$().ready(
function(){
var strings = ['0','1','2','3','4','S','6'];
var values = $.map(strings,function(value){
var result = new Number(value);
return isNaN(result) ? null:result;//isNaN:is Not a Number的缩写
}
);
for (key in values) {
alert(values[key]);
}
}
);
</script>

原生js遍历json对象

遍历json对象:

无规律:

<script>
var json = [{dd:'SB',AA:'东东',re1:123},{cccc:'dd',lk:'1qw'}];
for(var i=0,l=json.length;i<l;i++){
for(var key in json[i]){
alert(key+':'+json[i][key]);
}
}
</script>

有规律:

packJson = [

{"name":"nikita", "password":"1111"},

{"name":"tony", "password":"2222"}

];

for(var p in packJson){//遍历json数组时,这么写p为索引,0,1

  alert(packJson[p].name + " " + packJson[p].password);

}

也可以用这个:

for(var i = 0; i < packJson.length; i++){

  alert(packJson[i].name + " " + packJson[i].password);

}

遍历json对象

myJson = {"name":"caibaojian", "password":"1111"};

for(var p in myJson){//遍历json对象的每个key/value对,p为key

  alert(p + " " + myJson[p]);

}

有如下 json对象:

var obj ={"name":"冯娟","password":"123456","department":"技术部","sex":"女","old":30};
遍历方法:
for(var p in obj){
str = str+obj[p]+',';
return str;
}

以上就是小编为大家带来的jquery对Json的各种遍历方法总结(必看篇)的全部内容了,希望对大家有所帮助,多多支持三水点靠木~

Javascript 相关文章推荐
动态添加js事件实现代码
Mar 12 Javascript
JavaScript输出当前时间Unix时间戳的方法
Apr 06 Javascript
Javascript删除指定元素节点的方法
Jun 21 Javascript
js判断数组key是否存在(不用循环)的简单实例
Aug 03 Javascript
Knockout结合Bootstrap创建动态UI实现产品列表管理
Sep 14 Javascript
详解JSON1:使用TSQL查询数据和更新JSON数据
Nov 21 Javascript
JavaScript严格模式详解
Jan 16 Javascript
jQuery实现的浮动层div浏览器居中显示效果
Feb 03 Javascript
关于vue.js发布后路径引用的问题解决
Aug 15 Javascript
Angular4实现鼠标悬停3d倾斜效果
Oct 25 Javascript
Vue前端开发规范整理(推荐)
Apr 23 Javascript
JavaScript 判断对象中是否有某属性的常用方法
Jun 14 Javascript
浅析Javascript的自动分号插入(ASI)机制
Sep 29 #Javascript
完美解决IE9浏览器出现的对象未定义问题
Sep 29 #Javascript
JSON 对象未定义错误的解决方法
Sep 29 #Javascript
Node.js检测端口(port)是否被占用的简单示例
Sep 29 #Javascript
json定义及jquery操作json的方法
Sep 29 #Javascript
JavaScript中apply方法的应用技巧小结
Sep 29 #Javascript
老生常谈javascript变量的命名规范和注释
Sep 29 #Javascript
You might like
《魔兽争霸3:重制版》翻车了?你想要的我们都没有
2019/11/07 魔兽争霸
关于php curl获取301或302转向的网址问题的解决方法
2011/06/02 PHP
修改php.ini不生效问题解决方法(上传大于8M的文件)
2013/06/14 PHP
PHP编程获取音频文件时长的方法【基于getid3类】
2017/04/20 PHP
PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】
2017/11/14 PHP
jQuery 隔行换色 支持键盘上下键,按Enter选定值
2009/08/02 Javascript
使用jQuery解决IE与FireFox下createElement方法的差异
2013/11/14 Javascript
AngularJS ng-blur 指令详解及简单实例
2016/07/30 Javascript
vue实现列表的添加点击
2016/12/29 Javascript
JS实现图片旋转动画效果封装与使用示例
2018/07/09 Javascript
基于vue cli 通过命令行传参实现多环境配置
2018/07/12 Javascript
Angular中的ng-template及angular 使用ngTemplateOutlet 指令的方法
2018/08/08 Javascript
微信小程序带动画弹窗组件使用方法详解
2018/11/27 Javascript
jQuery.parseJSON()函数详解
2019/02/28 jQuery
vue开发移动端底部导航条功能
2020/04/08 Javascript
如何实现vue的tree组件
2020/12/03 Vue.js
Vue使用Ref跨层级获取组件的步骤
2021/01/25 Vue.js
[03:36]2014DOTA2 TI小组赛综述 八强诞生进军钥匙球馆
2014/07/15 DOTA
[07:26]2015国际邀请赛第二日TOP10集锦
2015/08/06 DOTA
[49:08]OpTic vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python多线程方式执行多个bat代码
2016/06/07 Python
python回调函数中使用多线程的方法
2017/12/25 Python
Python实现简易Web爬虫详解
2018/01/03 Python
python简单鼠标自动点击某区域的实例
2019/06/25 Python
Python 将代码转换为可执行文件脱离python环境运行(步骤详解)
2021/01/25 Python
python热力图实现简单方法
2021/01/29 Python
HTML5中实现拖放效果无须借助javascript
2012/12/26 HTML / CSS
节省高达65%的城市景点费用:Go City
2019/07/06 全球购物
法学专业自我鉴定
2014/02/05 职场文书
青年文明号复核材料
2014/02/11 职场文书
科技工作者先进事迹
2014/08/16 职场文书
学校领导班子四风问题整改意见
2014/10/02 职场文书
《小乌鸦爱妈妈》教学反思
2016/02/19 职场文书
某某幼儿园的教育教学管理调研分析报告
2019/11/29 职场文书
浅谈Java实现分布式事务的三种方案
2021/06/11 Java/Android
Python合并pdf文件的工具
2021/07/01 Python