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插件 selectToSelect使用方法
Oct 02 Javascript
探讨jQuery的ajax使用场景(c#)
Dec 03 Javascript
javascript实现的弹出层背景置灰-模拟(easyui dialog)
Dec 27 Javascript
分享20个提升网站界面体验的jQuery插件
Dec 15 Javascript
JSONP跨域GET请求解决Ajax跨域访问问题
Dec 31 Javascript
适用于javascript开发者的Processing.js入门教程
Feb 24 Javascript
jQuery实现下拉框多选 jquery-multiselect 的实例代码
Jul 14 Javascript
js控制文本框只能输入中文、英文、数字与指定特殊符号的实现代码
Sep 09 Javascript
微信小程序 wx.request(object) API详解及实例代码
Sep 30 Javascript
使用express搭建一个简单的查询服务器的方法
Feb 09 Javascript
Vue 中对图片地址进行拼接的方法
Sep 03 Javascript
原生javascript制作贪吃蛇小游戏的方法分析
Feb 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
PHP读取XML值的代码(推荐)
2011/01/01 PHP
PHP操作MongoDB GridFS 存储文件的详解
2013/06/20 PHP
PHP上传文件时文件过大$_FILES为空的解决方法
2013/11/26 PHP
php实现的美国50个州选择列表实例
2015/04/20 PHP
laravel实现查询最后执行的一条sql语句的方法
2019/10/09 PHP
php7 list()、session及其他模块的修改实例分析
2020/05/25 PHP
JS 常用校验函数
2009/03/26 Javascript
js chrome浏览器判断代码
2010/03/28 Javascript
javascript中xml操作实现代码
2011/11/21 Javascript
创建公共调用 jQuery Ajax 带返回值
2012/08/01 Javascript
jQuery移动和复制dom节点实用DOM操作案例
2012/12/17 Javascript
Javascript中产生固定结果的函数优化技巧
2013/01/16 Javascript
js闭包所用的场合以及优缺点分析
2015/06/22 Javascript
JavaScript编程中的Promise使用大全
2015/07/28 Javascript
javascript中 try catch用法
2015/08/16 Javascript
jQuery通过写入cookie实现更换网页背景的方法
2016/04/15 Javascript
深入理解JavaScript中Ajax
2016/08/02 Javascript
js中setTimeout的妙用--防止循环超时
2017/03/06 Javascript
基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式
2018/01/17 Javascript
vue文件树组件使用详解
2018/03/29 Javascript
vue.js轮播图组件使用方法详解
2018/07/03 Javascript
前端vue-cli项目中使用img图片和background背景图的几种方法
2019/11/13 Javascript
JS+CSS实现炫酷光感效果
2020/09/05 Javascript
[01:10]DOTA2亚洲邀请赛 征战号角响彻全场
2015/01/06 DOTA
Python2和Python3之间的str处理方式导致乱码的讲解
2019/01/03 Python
Python反爬虫技术之防止IP地址被封杀的讲解
2019/01/09 Python
利用Python代码实现一键抠背景功能
2019/12/29 Python
基于python实现破解滑动验证码过程解析
2020/05/28 Python
详解css3中 text-fill-color属性
2019/07/08 HTML / CSS
CSS3动画和HTML5新特性详解
2020/08/31 HTML / CSS
医院门卫岗位职责
2013/12/30 职场文书
报社实习生自荐信
2014/01/24 职场文书
供电工程专业求职信
2014/08/09 职场文书
2014年党员个人剖析材料
2014/10/08 职场文书
教师工作决心书
2015/02/04 职场文书
《春酒》教学反思
2016/02/22 职场文书