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 相关文章推荐
使用jQuery实现返回顶部
Jan 26 Javascript
jQuery动态星级评分效果实现方法
Aug 06 Javascript
IE中document.createElement的iframe无法设置属性name的解决方法
Sep 14 Javascript
javascript实现html页面之间参数传递的四种方法实例分析
Dec 15 Javascript
jQuery表格插件datatables用法汇总
Mar 29 Javascript
基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)
Sep 02 Javascript
jQuery webuploader分片上传大文件
Nov 07 Javascript
jQuery Tree Multiselect使用详解
May 02 jQuery
详解JavaScript按概率随机生成事件
Aug 02 Javascript
详解ajax的data参数错误导致页面崩溃
Apr 30 Javascript
Vue2.0生命周期的理解
Aug 20 Javascript
基于JS开发微信网页录音功能的实例代码
Apr 30 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
建站常用13种PHP开源CMS比较
2009/08/23 PHP
PHP引用的调用方法分析
2016/04/25 PHP
PHP使用gearman进行异步的邮件或短信发送操作详解
2020/02/27 PHP
Dom 结点创建 基础知识
2011/10/01 Javascript
浮动的div自适应居中显示的js代码
2013/12/23 Javascript
浅析JQuery中的html(),text(),val()区别
2014/09/01 Javascript
JQuery.validate在ie8下不支持的快速解决方法
2016/05/18 Javascript
深入浅析JavaScript中的arguments对象(强力推荐)
2016/06/03 Javascript
用JS实现轮播图效果(二)
2016/06/26 Javascript
JS生成不重复的随机数组的简单实例
2016/07/10 Javascript
全面解析node 表单的图片上传
2016/11/21 Javascript
vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
2018/08/05 Javascript
vue2.0的虚拟DOM渲染思路分析
2018/08/09 Javascript
解决vuejs项目里css引用背景图片不能显示的问题
2018/09/13 Javascript
JS面试题大坑之隐式类型转换实例代码
2018/10/14 Javascript
深入理解webpack process.env.NODE_ENV配置
2020/02/23 Javascript
js Math数学简单使用操作示例
2020/03/13 Javascript
微信小程序实现签到弹窗动画
2020/09/21 Javascript
[01:04:02]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第二场 1月24日
2021/03/11 DOTA
Python实现栈的方法
2015/05/26 Python
深入理解NumPy简明教程---数组1
2016/12/17 Python
在Python中使用AOP实现Redis缓存示例
2017/07/11 Python
Python读csv文件去掉一列后再写入新的文件实例
2017/12/28 Python
python 中的list和array的不同之处及转换问题
2018/03/13 Python
django自带的server 让外网主机访问方法
2018/05/14 Python
解决Python Matplotlib绘图数据点位置错乱问题
2020/05/16 Python
Django 实现图片上传和下载功能
2020/12/31 Python
css3.0 图形构成实例练习二
2013/03/19 HTML / CSS
HTML5边玩边学(3)像素和颜色
2010/09/21 HTML / CSS
OPPO手机官方商城:中国手机市场出货量第一品牌
2017/10/18 全球购物
Interflora澳大利亚:同日鲜花速递
2019/06/25 全球购物
上课看小说检讨书
2014/02/22 职场文书
微电影大赛策划方案
2014/06/05 职场文书
部队2014年终工作总结
2014/11/27 职场文书
毕业生捐书活动倡议书
2015/04/27 职场文书
Java中CyclicBarrier和CountDownLatch的用法与区别
2021/08/23 Java/Android