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 相关文章推荐
加速IE的Javascript document输出的方法
Dec 02 Javascript
js中top/parent/frame概述及案例应用
Feb 06 Javascript
js实现支持手机滑动切换的轮播图片效果实例
Apr 29 Javascript
js实现网页收藏功能
Dec 17 Javascript
JavaScript中的Number数字类型学习笔记
May 26 Javascript
bootstrapValidator表单验证插件学习
Dec 30 Javascript
在vue项目中引入highcharts图表的方法(详解)
Mar 05 Javascript
Vue子组件向父组件通信与父组件调用子组件中的方法
Jun 22 Javascript
vue中render函数的使用详解
Oct 12 Javascript
vue: WebStorm设置快速编译运行的方法
Oct 18 Javascript
vue mounted 调用两次的完美解决办法
Oct 29 Javascript
微信小程序webSocket的使用方法
Feb 20 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
改造一台复古桌面收音机
2021/03/02 无线电
页面乱码问题的根源及其分析
2013/08/09 PHP
PHP编程计算文件或数组中单词出现频率的方法
2017/05/22 PHP
tp5.1 框架路由操作-URL生成实例分析
2020/05/26 PHP
JavaScript调用后台的三种方法实例
2013/10/17 Javascript
基于jquery实现的文字淡入淡出效果
2013/11/14 Javascript
Node.js中的模块机制学习笔记
2014/11/04 Javascript
jQuery中Ajax的load方法详解
2015/01/14 Javascript
javascript实现在线客服效果
2015/07/15 Javascript
jQuery实现鼠标悬停背景翻转的黑色导航菜单代码
2015/09/14 Javascript
jquery悬浮提示框完整实例
2016/01/13 Javascript
jQuery Dialog对话框事件用法实例分析
2016/05/10 Javascript
js获取元素的外链样式的简单实现方法
2016/06/06 Javascript
AngularJS中关于ng-class指令的几种实现方式详解
2016/09/17 Javascript
AngularJS执行流程详解
2017/02/17 Javascript
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
2018/10/12 Javascript
layui时间控件选择时间范围的实现方法
2019/09/28 Javascript
不依任何赖第三方,单纯用vue实现Tree 树形控件的案例
2020/09/21 Javascript
Node快速切换版本、版本回退(降级)、版本更新(升级)
2021/01/07 Javascript
[04:40]2016国际邀请赛中国区预选赛全程TOP10镜头集锦
2016/07/01 DOTA
Python科学计算之NumPy入门教程
2017/01/15 Python
python字典DICT类型合并详解
2017/08/17 Python
python使用正则表达式替换匹配成功的组
2017/11/17 Python
Django框架基础模板标签与filter使用方法详解
2019/07/23 Python
Python判断字符串是否xx开始或结尾的示例
2019/08/08 Python
Python 测试框架unittest和pytest的优劣
2020/09/26 Python
瑜伽服装品牌:露露柠檬(lululemon athletica)
2017/06/04 全球购物
史蒂夫·马登加拿大官网:Steve Madden加拿大
2017/11/18 全球购物
印尼网上商店:Alfacart.com
2019/03/11 全球购物
Bonprix法国:时尚、鞋子、家居
2020/12/29 全球购物
委托书范本
2014/04/02 职场文书
教师职业道德事迹材料
2014/08/18 职场文书
先进班组材料范文
2014/12/25 职场文书
家长意见书
2015/06/04 职场文书
法定代表人身份证明书
2015/06/18 职场文书
高三教师工作总结2015
2015/07/21 职场文书