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 相关文章推荐
javascript+mapbar实现地图定位
Apr 09 Javascript
Javascript实现视频轮播在pc端与移动端均可
Sep 29 Javascript
zTree插件之单选下拉菜单实例代码
Nov 07 Javascript
jquery实现的3D旋转木马特效代码分享
Aug 25 Javascript
分享使用AngularJS创建应用的5个框架
Dec 05 Javascript
KnockoutJS 3.X API 第四章之数据控制流with绑定
Oct 10 Javascript
纯javaScript、jQuery实现个性化图片轮播【推荐】
Jan 08 Javascript
ReactNative列表ListView的用法
Aug 02 Javascript
JQuery 又谈ajax局部刷新
Nov 27 jQuery
JS函数节流和函数防抖问题分析
Dec 18 Javascript
JS与CSS3实现图片响应鼠标移动放大效果示例
May 04 Javascript
react-native使用leanclound消息推送的方法
Aug 06 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
1982年日本摄影师镜头下的中国孩子 那无忧无虑的童年
2020/03/12 杂记
PHILIPS D1835/D1875的电路分析与打理
2021/03/02 无线电
用文本作数据处理
2006/10/09 PHP
ThinkPHP使用心得分享-ThinkPHP + Ajax 实现2级联动下拉菜单
2014/05/15 PHP
destoon供应信息title调用出公司名称的方法
2014/08/22 PHP
Yii2前后台分离及migrate使用(七)
2016/05/04 PHP
javascript parseInt 函数分析(转)
2009/03/21 Javascript
jquery中的sortable排序之后的保存状态的解决方法
2010/01/28 Javascript
IE下js调试工具Companion.JS
2010/10/15 Javascript
在IE 浏览器中使用 jquery的fadeIn() 效果 英文字符字体加粗
2011/06/02 Javascript
JQuery的Ajax跨域请求原理概述及实例
2013/04/26 Javascript
JS去除字符串两端空格的简单实例
2013/12/27 Javascript
实现checkbox全选、反选、取消JavaScript小脚本异常
2014/04/10 Javascript
nodejs文件操作模块FS(File System)常用函数简明总结
2014/06/05 NodeJs
基于jQuery实现点击最后一行实现行自增效果的表格
2016/01/12 Javascript
如何通过js实现图片预览功能【附实例代码】
2016/03/30 Javascript
JS实现鼠标框选效果完整实例
2016/06/20 Javascript
p5.js实现斐波那契螺旋的示例代码
2018/03/22 Javascript
JavaScript引用类型RegExp基本用法详解
2018/08/09 Javascript
解决vue-cli webpack打包后加载资源的路径问题
2018/09/25 Javascript
node爬取新型冠状病毒的疫情实时动态
2020/02/06 Javascript
Python统计列表中的重复项出现的次数的方法
2014/08/18 Python
Python利用字典将两个通讯录文本合并为一个文本实例
2018/01/16 Python
Django restframework 源码分析之认证详解
2019/02/22 Python
Django 多环境配置详解
2019/05/14 Python
澳大利亚办公室装修:JasonL Office Furniture
2019/06/25 全球购物
拓展培训心得体会
2014/01/04 职场文书
关于梦想的演讲稿
2014/05/05 职场文书
暑期学习心得体会
2014/09/02 职场文书
2014企业年终工作总结
2014/12/23 职场文书
初中中等生评语
2014/12/29 职场文书
教师个人自我评价
2015/03/04 职场文书
大学生志愿者心得体会
2016/01/15 职场文书
MySQL5.7并行复制原理及实现
2021/06/03 MySQL
详解Python生成器和基于生成器的协程
2021/06/03 Python
分享五个Node.js开发的优秀实践 
2022/04/07 NodeJs