jquery 对 Json 的各种遍历

简介:  原文网址:前端开发博客 (http://caibaojian.com/jquery-each-json.html) 概述     JSON(javascript Object Notation) 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式。
+关注继续查看


原文网址:前端开发博客 (http://caibaojian.com/jquery-each-json.html)

概述

    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对象

    无规律:

//code from http://caibaojian.com/jquery-each-json.html
<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;
}



相关文章
|
3月前
|
XML 存储 JSON
【jquery】前端数据格式:json、xml对比
【jquery】前端数据格式:json、xml对比
42 0
|
8月前
|
JSON 前端开发 JavaScript
jquery ajax 和servlet json 结合的简单小例子
jquery ajax 和servlet json 结合的简单小例子
|
10月前
|
JSON JavaScript 数据格式
jquery请求json数据失败但是不报错
jquery请求json数据失败但是不报错
jquery请求json数据失败但是不报错
|
XML JSON JavaScript
jQuery、ajax、JSON三者之间的关系
最近在做项目的过程中,对于jQuery、ajax、JSON这三者的关系总是理不清楚,于是,在简单是使用,有了丁点的经验,于是对这三者的关系做了下研究: 1、jQuery : 以下来自百度百科 jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。
3451 0
|
JavaScript Linux 应用服务中间件
Python全栈 Web(Ajax JSON JQuery)
Flask、Python、Django、框架、服务器、客户端、浏览器、交互、WEB、Python前端、CSS、JAVA、HTML、H5、PHP、JavaScript、JQuery、分布式开发
2923 0
|
JSON 前端开发 .NET
如何构建ASP.NET MVC4&JQuery&AJax&JSon示例
背景:   博客中将构建一个小示例,用于演示在ASP.NET MVC4项目中,如何使用JQuery Ajax。 步骤: 1,添加控制器(HomeController)和动作方法(Index),并为Index动作方法添加视图(Index.cshtml),视图中HTML如下: 输入你的姓名: 输入你的年龄: 提交 清空   视图中包含两个文本框,分别用来输入名字和年龄,包含连个按钮,分别用来提交信息和清空文本框的内容,同时包含一个段落,用来显示Ajax返回的数据信息。
1015 0
相关产品
云迁移中心
推荐文章
更多