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 相关文章推荐
禁用Tab键JS代码兼容Firefox和IE
Apr 18 Javascript
JavaScript高级程序设计(第三版)学习笔记1~5章
Mar 11 Javascript
用JavaScript动态建立或增加CSS样式表的实现方法
May 20 Javascript
JavaScript制作颜色反转小游戏
Sep 25 Javascript
jQuery实现的文字逐行向上间歇滚动效果示例
Sep 06 jQuery
vue实现商城上货组件简易版
Nov 27 Javascript
vue.extend与vue.component的区别和联系
Sep 19 Javascript
在vue中获取token,并将token写进header的方法
Sep 26 Javascript
JavaScript学习笔记之DOM基础操作实例小结
Jan 09 Javascript
vue-cli项目使用mock数据的方法(借助express)
Apr 15 Javascript
VScode格式化ESlint方法(最全最好用方法)
Sep 10 Javascript
微信小程序动态添加和删除组件的现实
Feb 28 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
小偷PHP+Html+缓存
2006/12/20 PHP
解析php通过cookies获取远程网页的指定代码
2013/06/25 PHP
PHP实现动态压缩js与css文件的方法
2018/05/02 PHP
PHP获取当前时间不准确问题解决方案
2020/08/14 PHP
php命令行模式代码实例详解
2021/02/26 PHP
input+select(multiple) 实现下拉框输入值
2009/05/21 Javascript
六款帮助你实现惊艳视差滚动效果的jQuery插件
2012/09/14 Javascript
关于js中for in的缺陷浅析
2013/12/02 Javascript
jQuery插件StickUp实现网页导航置顶
2015/04/12 Javascript
使用AngularJS编写较为优美的JavaScript代码指南
2015/06/19 Javascript
使用ngView配合AngularJS应用实现动画效果的方法
2015/06/19 Javascript
JavaScript计算某一天是星期几的方法
2015/08/05 Javascript
javascript实现uploadify上传格式以及个数限制
2015/11/23 Javascript
如何解决easyui自定义标签 datagrid edit combobox 手动输入保存不上
2015/12/26 Javascript
浅谈Node.js之异步流控制
2017/10/25 Javascript
解决VUEX兼容IE上的报错问题
2018/03/01 Javascript
vue 使某个组件不被 keep-alive 缓存的方法
2018/09/21 Javascript
基于AngularJS拖拽插件ngDraggable.js实现拖拽排序功能
2019/04/02 Javascript
js实现小时钟效果
2020/03/25 Javascript
深入分析jQuery.one() 函数
2020/06/03 jQuery
Python实现删除当前目录下除当前脚本以外的文件和文件夹实例
2015/07/27 Python
Python入门学习之字符串与比较运算符
2015/10/12 Python
python开启摄像头以及深度学习实现目标检测方法
2018/08/03 Python
Python设计模式之享元模式原理与用法实例分析
2019/01/11 Python
Python合并同一个文件夹下所有PDF文件的方法
2019/03/11 Python
python学习——内置函数、数据结构、标准库的技巧(推荐)
2019/04/18 Python
python实现两个字典合并,两个list合并
2019/12/02 Python
美国厨房和园艺工具网上商店:Nestneed
2019/08/24 全球购物
澳大利亚二手奢侈品网站:Modsie
2019/09/23 全球购物
店长岗位的工作内容
2013/11/12 职场文书
工程部主管岗位职责
2013/11/17 职场文书
初一体育教学反思
2014/01/29 职场文书
幼师大班个人总结
2015/02/13 职场文书
小学教师见习总结
2015/06/23 职场文书
党员干部学习心得体会
2016/01/23 职场文书
CSS实现渐变色边框(Gradient borders)的5种方法
2022/03/25 HTML / CSS