Jquery解析Json数组List方法大全
把json字符串变为json数组的方法总结：
众所周知，在Js/Jquery中是可以使用json数组的，我们要想使用json数组，前提是要把接收到的json字符串转为json数组哦。
下面站长就为大家总结了Jquery解析json的常用方法，希望对大家有帮助
本章方法讲解：不明白的地方，加群@群主即可
1，Jquery发送Post/Get等Http请求， $.each直接解析Json数组
2，用eval解析json数组，$.each循环
3，用JSON.parse解析json数组，$.each循环
4，用JSON.parse解析json数组，for循环
5,用JSON.parse解析复杂json字符串（同时包含json对象和json数组的json字符串）
<!DOCTYPE >
<html>
<head>
<title>Jquery解析json数组List-yunjson.com</title>
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<script> /*
把json字符串变为json数组的方法总结：
众所周知，在Js/Jquery中是可以使用json数组的，我们要想使用json数组，
前提是要把接收到的json字符串转为json数组哦。
下面站长就为大家总结了Jquery解析json的常用方法，希望对大家有帮助
本章方法讲解：不明白的地方，加群@群主即可
1，Jquery发送Post/Get等Http请求， $.each直接解析Json数组
2，用eval解析json数组，$.each循环
3，用JSON.parse解析json数组，$.each循环
4，用JSON.parse解析json数组，for循环
5,用JSON.parse解析复杂json字符串（同时包含json对象和json数组的json字符串）
*/</script>
</head>
<body>
<script type="text/javascript">
//以下结果，请在console控制台中查看（F12或者审查元素，即可进入Console控制台）
//第一种用法：Jquery接收Post/Get返回值， $.each直接解析Json数组
//（$.post，$.get，$.getJSON，$.ajax等等 解析json的原理都一样）
$.post('你的URL', { action: 'GetList' }, function (data) {
//此post请求为异步，上面是模拟的测试地址，正式使用时，请换成自己的接口地址
//为了方便，在这里我直接赋值咯
data = [{ "Name": "Json在线工具", "ProUrl": "www.yunjson.com", "SiteInfo": "Json在线工具（http://www.yunjson.com）" }, { "Name": "Json在线解析", "ProUrl": "www.yunjson.com", "SiteInfo": "Json在线解析（http://www.yunjson.com）" }, { "Name": "Json在线格式化", "ProUrl": "www.yunjson.com", "SiteInfo": "Json在线格式化（http://www.yunjson.com）"}]
if (data) {
//接收数据成功，开始处理json对象（此时data就是接收到的json数组）
//现在我们可以得到json数据中，需要循环得到每个json对象
//为了方便查看，直接在控制台中打印出来咯
$.each(data, function (index, item) {
//此时可以得到每个json对象哦，接下来的操作就交给大家了
console.log(data.Name);
console.log(data.ProUrl);
console.log(data.SiteID);
console.log(data.SiteLink);
console.log(data.SiteInfo);
});
}
}, 'json');
//下面来模拟下输出值（由于没有测试地址，在下面就直接赋值了）
var data = [{ "Name": "Json在线工具", "ProUrl": "www.yunjson.com", "SiteInfo": "Json在线工具（http://www.yunjson.com）" }, { "Name": "Json在线解析", "ProUrl": "www.yunjson.com", "SiteInfo": "Json在线解析（http://www.yunjson.com）" }, { "Name": "Json在线格式化", "ProUrl": "www.yunjson.com", "SiteInfo": "Json在线格式化（http://www.yunjson.com）"}]
console.log("第一种用法：Jquery中，$.each直接解析Json数组");
$.each(data, function (index, item) {
var result = item.Name + "--" + item.ProUrl + "--" + item.SiteInfo; //拼接数据，输出到控制台展示
console.log(result);
});
console.log("\r\n-------------------------我是第一和二的方法分割线哦-----------------------------------------------------\r\n");
// ------------------------------我是第一和二的方法分割线哦----------------------------------------------------------
//第二种用法：用eval解析json数组（先用eval把json字符串变为json数组对象，在用$.each循环取值，得到每一个对象item）
var data = '[{ "Name": "Json在线工具", "ProUrl": "www.yunjson.com", "SiteInfo": "Json在线工具（http://www.yunjson.com）" }, { "Name": "Json在线解析", "ProUrl": "www.yunjson.com", "SiteInfo": "Json在线解析（http://www.yunjson.com）" }, { "Name": "Json在线格式化", "ProUrl": "www.yunjson.com", "SiteInfo": "Json在线格式化（http://www.yunjson.com）"}]';
var dataObj = eval('(' + data + ')'); //此时已变成json数组对象咯，下面可以直接用$.each循环取值啦
console.log("第二种用法：用eval解析json数组，$.each循环");
$.each(dataObj, function (index, item) {
var result = item.Name + "--" + item.ProUrl + "--" + item.SiteInfo; //拼接数据，输出到控制台展示
console.log(result);
});
console.log("\r\n-------------------------我是第二和三的方法分割线哦-----------------------------------------------------\r\n");
// ------------------------------我是第二和三的方法分割线哦----------------------------------------------------------
//第三种用法：用JSON.parse解析json数组（先用JSON.parse把json字符串变为json数组对象，在用$.each循环取值，得到每一个对象item）
var data = '[{ "Name": "Json在线工具", "ProUrl": "www.yunjson.com", "SiteInfo": "Json在线工具（http://www.yunjson.com）" }, { "Name": "Json在线解析", "ProUrl": "www.yunjson.com", "SiteInfo": "Json在线解析（http://www.yunjson.com）" }, { "Name": "Json在线格式化", "ProUrl": "www.yunjson.com", "SiteInfo": "Json在线格式化（http://www.yunjson.com）"}]';
var dataObj = JSON.parse(data); //此时已变成json数组对象咯，下面可以直接用$.each循环取值啦
console.log("第三种用法：用JSON.parse解析json数组，$.each循环");
$.each(dataObj, function (index, item) {
var result = item.Name + "--" + item.ProUrl + "--" + item.SiteInfo; //拼接数据，输出到控制台展示
console.log(result);
});
console.log("\r\n-------------------------我是第三和四的方法分割线哦-----------------------------------------------------\r\n");
// ------------------------------我是第三和四的方法分割线哦----------------------------------------------------------
//第四种用法：用JSON.parse解析json数组（先用JSON.parse把json字符串变为json数组对象，在用for循环取值，得到每一个对象item）
var data = '[{ "Name": "Json在线工具", "ProUrl": "www.yunjson.com", "SiteInfo": "Json在线工具（http://www.yunjson.com）" }, { "Name": "Json在线解析", "ProUrl": "www.yunjson.com", "SiteInfo": "Json在线解析（http://www.yunjson.com）" }, { "Name": "Json在线格式化", "ProUrl": "www.yunjson.com", "SiteInfo": "Json在线格式化（http://www.yunjson.com）"}]';
var dataObj = JSON.parse(data); //此时已变成json数组对象咯，下面可以直接用for循环取值啦
console.log("第四种用法：用JSON.parse解析json数组，for循环");
for (var i = 0; i < dataObj.length; i++) {
var result = dataObj[i].Name + "--" + dataObj[i].ProUrl + "--" + dataObj[i].SiteInfo; //拼接数据，输出到控制台展示
console.log(result);
}
/*备注：
不管是eval还是JSON.parse 把json字符串转换为json数组对象后，
都需要用$.each或者for循环，进行调取数据哦
*/
console.log("\r\n-------------------------我是第四和五的方法分割线哦-----------------------------------------------------\r\n");
// ------------------------------我是第四和五的方法分割线哦----------------------------------------------------------
//第五种用法：用JSON.parse解析复杂json字符串
//（先用JSON.parse把复杂的json字符串变为json对象，在用for或者$.each循环取得里面的json数组，得到每一个对象）
var data = '{"Name":"Json在线解析","ProUrl":"www.yunjson.com","SiteID":1472222,"SiteLink":"官方QQ群：308250404","SiteList":[{"Name":"Json在线工具","ProUrl":"www.yunjson.com","SiteInfo":"Json在线工具（http://www.yunjson.com）"},{"Name":"Json在线解析","ProUrl":"www.yunjson.com","SiteInfo":"Json在线解析（http://www.yunjson.com）"},{"Name":"Json在线格式化","ProUrl":"www.yunjson.com","SiteInfo":"Json在线格式化（http://www.yunjson.com）"}]}';
var dataObj = JSON.parse(data); //此时已变成json对象咯，下面可以直接得到json对象的值 和 json数组对象， 直接用$.each循环json数组对象取值啦
//得到单个json对象
console.log("第五种用法：用JSON.parse解析复杂json字符串，$.each循环");
console.log("得到json单个对象");
console.log("Name:--" + dataObj.Name);
console.log("ProUrl:--" + dataObj.ProUrl);
console.log("SiteID:--" + dataObj.SiteID);
console.log("得到json数组对象");
$.each(dataObj.SiteList, function (index, item) {
var result = item.Name + "--" + item.ProUrl + "--" + item.SiteInfo; //拼接数据，输出到控制台展示
console.log(result);
});
/*
现在看看复杂的json解析也不过如此吧，现在你已经掌握了jquery解析json的方法咯，大胆的在项目中运用吧！！！
*/
</script>
</body>
</html>