json数组使用jquery each循环遍历

说实话,有点怕使用JSON,可能是因为比较少用的原因,也没有重点学习过这方面的知识,JavaScript的视频学习到了事件了。快要进入实战阶段了。一方面积累基础,一方面学习重点知识。

JSON数组格式是比较复杂的一种类型,我们可以通过each来循环遍历取出你所需要的东西。下面举一个例子,来源于stackoverflow.

{ "justIn": [
{ "textId": "123", "text": "Hello", "textType": "Greeting" },
{ "textId": "514", "text":"What's up?", "textType": "Question" },
{ "textId": "122", "text":"Come over here", "textType": "Order" }
],
"recent": [
{ "textId": "1255", "text": "Hello", "textType": "Greeting" },
{ "textId": "6564", "text":"What's up?", "textType": "Question" },
{ "textId": "0192", "text":"Come over here", "textType": "Order" }
],
"old": [
{ "textId": "5213", "text": "Hello", "textType": "Greeting" },
{ "textId": "9758", "text":"What's up?", "textType": "Question" },
{ "textId": "7655", "text":"Come over here", "textType": "Order" }
]
}

需求:需要将里面有用的内容插入到一个id为content的盒子里面。我们可以通过jquery的each方面来遍历。测试可以使用这样子的代码:

$.getJSON("data.php", function(data){
$.each(data, function(k, v) {
alert(k + ' ' + v);
$.each(v, function(k1, v1) {
alert(k1 + ' ' + v1);
});
});
});

输出每个数组包含的内容,我们使用一个有序列表输出内容来:

var that=$("#content"), _html='';
$.each(data, function(k, v) {
// alert(k + ' ' + v);
_html +='<ol><h2>'+k+'</h2>';
$.each(v, function(k1, v1) {
// alert(k1 + ' ' + v1);
$.each(v1,function(k2,v2){
// alert(k2+ " " +v2);
_html +='<li>'+k2+':'+v2+'</li>';
})
});
_html +='</ol>';
});
that.append(_html);

结果输出的内容如下:

<div id="contentHere">
<ol>
<h2>justIn</h2>
<li>textId:123</li>
<li>text:Hello</li>
<li>textType:Greeting</li>
<li>textId:514</li>
<li>text:What's up?</li>
<li>textType:Question</li>
<li>textId:122</li>
<li>text:Come over here</li>
<li>textType:Order</li>
</ol>
<ol>
<h2>recent</h2>
<li>textId:1255</li>
<li>text:Hello</li>
<li>textType:Greeting</li>
<li>textId:6564</li>
<li>text:What's up?</li>
<li>textType:Question</li>
<li>textId:0192</li>
<li>text:Come over here</li>
<li>textType:Order</li>
</ol>
<ol>
<h2>old</h2>
<li>textId:5213</li>
<li>text:Hello</li>
<li>textType:Greeting</li>
<li>textId:9758</li>
<li>text:What's up?</li>
<li>textType:Question</li>
<li>textId:7655</li>
<li>text:Come over here</li>
<li>textType:Order</li>
</ol>
</div>

在上一篇文章介绍JSON中,我们了解到JSON也有字符串,如果需要使用JSON前,需要将其转换为JSON格式。

在数据传输流程中,json是以文本,即字符串的形式传递的,而JS操作的是JSON对象,所以,JSON对象和JSON字符串之间的相互转换是关键。例如:

JSON字符串:

var str1 = '{ "name": "cxh", "sex": "man" }';

JSON对象:
var str2 = { "name": "cxh", "sex": "man" };
一、JSON字符串转换为JSON对象

要运用上面的str1,必须运用下面的要领先转化为JSON对象:

//由JSON字符串转换为JSON对象

var obj = eval('(' + str + ')');

或者

var obj = str.parseJSON(); //由JSON字符串转换为JSON对象

或者

var obj = JSON.parse(str); //由JSON字符串转换为JSON对象

然后,就可以这样读取:

Alert(obj.name);

Alert(obj.sex);

特别留心:如果obj本来就是一个JSON对象,那么运用 eval()函数转换后(哪怕是多次转换)还是JSON对象,但是运用 parseJSON()函数处理后会有疑问(抛出语法异常)。

二、可以运用 toJSONString()或者全局要领 JSON.stringify()将JSON对象转化为JSON字符串。

例如:

var last=obj.toJSONString(); //将JSON对象转化为JSON字符

或者

var last=JSON.stringify(obj); //将JSON对象转化为JSON字符

alert(last);

留心:

上面的多个要领中,除了eval()函数是js自带的之外,其他的多个要领都来自json.js包。新版本的 JSON 修改了 API,将 JSON.stringify() 和 JSON.parse() 两个要领都注入到了 Javascript 的内建对象里面,前者变成了 Object.toJSONString(),而后者变成了 String.parseJSON()。如果提示找不到toJSONString()和parseJSON()要领,则说明您的json包版本太低。

这个需要json-lib.jar包支持 该jar下载地址:点击下载

//JSON对象 JSONObject的使用
String str1 = "{ 'name': 'cxh', 'sex': '1' }";
JSONObject obj = JSONObject.fromObject(str1);
String name = obj.getString("name"); //直接返回字符串型 cxh
Object nameo = obj.get("name"); //直接返回对象型的cxh
int age = obj.getInt("sex"); //直接返回int型的sex
//JSON数组对象 JSONArray的运用
String jsonArrStr = "[{ 'name': 'cxh', 'sex': '1','website':'http://bejson.fuliqu.com' },{ 'name': '三少', 'sex': '1','website':'http://www.ij2ee.com' }]";        JSONArray array = JSONArray.fromObject(jsonArrStr);
	int size = array.size(); //获取JSON数组大小
	JSONObject jo = array.getJSONObject(0);//取第一个JSON对象
	for(int i=0;i<size;i++){
	JSONObject jo1 = array.getJSONObject(i);
	System.out.println(jo1.getString("website")); //循环返回网址
	}
	//序列化Bean对象为JSON对象
	User user = new User();
	user.setName("cxh");
	user.setSex(1);
	user.setWebsite("http://bejson.fuliqu.com");
	JSONObject jo2 =  JSONObject.fromObject(user);
	System.out.println(jo2.toString()); //则会输出 { 'name': 'cxh', 'sex': '1','website':'http://bejson.fuliqu.com' }
原创文章:json数组使用jquery each循环遍历 ,未经许可,禁止转载,©版权所有
原文出处:前端开发博客 (http://caibaojian.com/jquery-each-loop-with-json-array.html)

“json数组使用jquery each循环遍历”有1个评论

  1. @Life

    用多了就好了,其实就是遍历数组,准确来说不是JSON对象,是对象字面量,自己理解就行,推荐看汤姆大叔的文章http://www.cnblogs.com/TomXu/archive/2011/12/15/2288411.html

    登录回复