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' }

关注我

我的微信公众号:前端开发博客,在后台回复以下关键字可以获取资源。

  • 回复「小抄」,领取Vue、JavaScript 和 WebComponent 小抄 PDF
  • 回复「Vue脑图」获取 Vue 相关脑图
  • 回复「思维图」获取 JavaScript 相关思维图
  • 回复「简历」获取简历制作建议
  • 回复「简历模板」获取精选的简历模板
  • 回复「加群」进入500人前端精英群
  • 回复「电子书」下载我整理的大量前端资源,含面试、Vue实战项目、CSS和JavaScript电子书等。
  • 回复「知识点」下载高清JavaScript知识点图谱

每日分享有用的前端开发知识,加我微信:caibaojian89 交流