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 相关文章推荐
获取Javscript执行函数名称的方法
Dec 22 Javascript
JQuery 弹出框定位实现方法
Dec 02 Javascript
SharePoint 客户端对象模型 (一) ECMA Script
May 22 Javascript
jQuery.query.js 取参数的两点问题分析
Aug 06 Javascript
jquery特效 幻灯片效果示例代码
Jul 16 Javascript
简单常用的幻灯片播放实现代码
Sep 25 Javascript
jQuery中hasClass()方法用法实例
Jan 06 Javascript
ES6中Iterator与for..of..遍历用法分析
Mar 31 Javascript
关于在vue-cli中使用微信自动登录和分享的实例
Jun 22 Javascript
Angular 1.x个人使用的经验小结
Jul 19 Javascript
vue-cli 引入jQuery,Bootstrap,popper的方法
Sep 03 jQuery
ES6 Set结构的应用实例分析
Jun 26 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
多文件上传的例子
2006/10/09 PHP
使用ThinkPHP自带的Http类下载远程图片到本地的实现代码
2011/08/02 PHP
超小PHP小马小结(方便查找后门的朋友)
2012/05/05 PHP
深入php 正则表达式的学习探讨
2013/06/06 PHP
php中字符串和正则表达式详解
2014/10/23 PHP
简述php环境搭建与配置
2016/12/05 PHP
php实现微信支付之现金红包
2018/05/30 PHP
JavaScript 语言基础知识点总结(思维导图)
2013/11/10 Javascript
Javascript中浮点数相乘的一个解决方法
2014/06/03 Javascript
jQuery将多条数据插入模态框的示例代码
2014/09/25 Javascript
JavaScript设计模式之代理模式介绍
2014/12/28 Javascript
jQuery实现滚动切换的tab选项卡效果代码
2015/08/26 Javascript
AngularJS中$interval的用法详解
2016/02/02 Javascript
利用Js+Css实现折纸动态导航效果实例源码
2017/01/25 Javascript
js实现城市级联菜单的2种方法
2017/06/23 Javascript
详解vue-cil和webpack中本地静态图片的路径问题解决方案
2017/09/27 Javascript
AngularJS实现自定义指令及指令配置项的方法
2017/11/20 Javascript
jQuery实现的鼠标响应缓冲动画效果示例
2018/02/13 jQuery
vue组件中watch props根据v-if动态判断并挂载DOM的问题
2019/05/12 Javascript
Layui table field初始化加载时进行隐藏的方法
2019/09/19 Javascript
纯js实现无缝滚动功能代码实例
2020/02/21 Javascript
[38:31]完美世界DOTA2联赛PWL S3 Magma vs GXR 第一场 12.13
2020/12/17 DOTA
ipad上运行python的方法步骤
2019/10/12 Python
Python数据可视化:泊松分布详解
2019/12/07 Python
Python pysnmp使用方法及代码实例
2020/08/24 Python
HTML5 canvas基本绘图之图形变换
2016/06/27 HTML / CSS
Html5页面二次分享的实现
2018/07/30 HTML / CSS
Ref与out有什么不同
2012/11/24 面试题
医院检讨书范文
2014/02/01 职场文书
维护民族团结演讲稿
2014/08/27 职场文书
护理医院见习报告
2014/11/03 职场文书
2015年安全工作总结范文
2015/04/02 职场文书
家装电话营销开场白
2015/05/29 职场文书
python playwright 自动等待和断言详解
2021/11/27 Python
Spring Boot实战解决高并发数据入库之 Redis 缓存+MySQL 批量入库问题
2022/02/12 Redis
Android Studio实现带三角函数对数运算功能的高级计算器
2022/05/20 Java/Android