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字符串)



001<!DOCTYPE >
002<html>
003<head>
004    <title>Jquery解析json数组List-Jsons.cn</title>
005    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
006    <script>        /*
007        把json字符串变为json数组的方法总结:
008        众所周知,在Js/Jquery中是可以使用json数组的,我们要想使用json数组,
009        前提是要把接收到的json字符串转为json数组哦。
010        下面站长就为大家总结了Jquery解析json的常用方法,希望对大家有帮助
011 
012        本章方法讲解:不明白的地方,加群@群主即可
013 
014        1,Jquery发送Post/Get等Http请求, $.each直接解析Json数组
015        2,用eval解析json数组,$.each循环
016        3,用JSON.parse解析json数组,$.each循环
017        4,用JSON.parse解析json数组,for循环
018        5,用JSON.parse解析复杂json字符串(同时包含json对象和json数组的json字符串)
019 
020        */</script>
021</head>
022<body>
023    <script type="text/javascript">
024        //以下结果,请在console控制台中查看(F12或者审查元素,即可进入Console控制台)
025        //第一种用法:Jquery接收Post/Get返回值, $.each直接解析Json数组
026 
027        //($.post,$.get,$.getJSON,$.ajax等等 解析json的原理都一样)
028        $.post('你的URL', { action: 'GetList' }, function (data) {
029            //此post请求为异步,上面是模拟的测试地址,正式使用时,请换成自己的接口地址
030            //为了方便,在这里我直接赋值咯
031            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)"}]
032            if (data) {
033                //接收数据成功,开始处理json对象(此时data就是接收到的json数组)
034                //现在我们可以得到json数据中,需要循环得到每个json对象
035                //为了方便查看,直接在控制台中打印出来咯
036                $.each(data, function (index, item) {
037                    //此时可以得到每个json对象哦,接下来的操作就交给大家了
038                    console.log(data.Name);
039                    console.log(data.ProUrl);
040                    console.log(data.SiteID);
041                    console.log(data.SiteLink);
042                    console.log(data.SiteInfo);
043                });
044            }
045        }, 'json');
046        //下面来模拟下输出值(由于没有测试地址,在下面就直接赋值了)
047        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)"}]
048        console.log("第一种用法:Jquery中,$.each直接解析Json数组");
049        $.each(data, function (index, item) {
050            var result = item.Name   "--"   item.ProUrl   "--"   item.SiteInfo; //拼接数据,输出到控制台展示
051            console.log(result);
052        });
053        console.log("\r\n-------------------------我是第一和二的方法分割线哦-----------------------------------------------------\r\n");
054 
055        // ------------------------------我是第一和二的方法分割线哦----------------------------------------------------------
056 
057        //第二种用法:用eval解析json数组(先用eval把json字符串变为json数组对象,在用$.each循环取值,得到每一个对象item)
058 
059        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)"}]';
060        var dataObj = eval('('   data   ')'); //此时已变成json数组对象咯,下面可以直接用$.each循环取值啦
061 
062        console.log("第二种用法:用eval解析json数组,$.each循环");
063        $.each(dataObj, function (index, item) {
064            var result = item.Name   "--"   item.ProUrl   "--"   item.SiteInfo; //拼接数据,输出到控制台展示
065            console.log(result);
066        });
067        console.log("\r\n-------------------------我是第二和三的方法分割线哦-----------------------------------------------------\r\n");
068 
069        // ------------------------------我是第二和三的方法分割线哦----------------------------------------------------------
070 
071        //第三种用法:用JSON.parse解析json数组(先用JSON.parse把json字符串变为json数组对象,在用$.each循环取值,得到每一个对象item)
072 
073        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)"}]';
074        var dataObj = JSON.parse(data); //此时已变成json数组对象咯,下面可以直接用$.each循环取值啦
075 
076        console.log("第三种用法:用JSON.parse解析json数组,$.each循环");
077        $.each(dataObj, function (index, item) {
078            var result = item.Name   "--"   item.ProUrl   "--"   item.SiteInfo; //拼接数据,输出到控制台展示
079            console.log(result);
080        });
081        console.log("\r\n-------------------------我是第三和四的方法分割线哦-----------------------------------------------------\r\n");
082 
083        // ------------------------------我是第三和四的方法分割线哦----------------------------------------------------------
084 
085        //第四种用法:用JSON.parse解析json数组(先用JSON.parse把json字符串变为json数组对象,在用for循环取值,得到每一个对象item)
086 
087        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)"}]';
088        var dataObj = JSON.parse(data); //此时已变成json数组对象咯,下面可以直接用for循环取值啦
089 
090        console.log("第四种用法:用JSON.parse解析json数组,for循环");
091        for (var i = 0; i < dataObj.length; i  ) {
092            var result = dataObj[i].Name   "--"   dataObj[i].ProUrl   "--"   dataObj[i].SiteInfo;  //拼接数据,输出到控制台展示
093            console.log(result);
094        }
095        /*备注:
096        不管是eval还是JSON.parse 把json字符串转换为json数组对象后,
097        都需要用$.each或者for循环,进行调取数据哦
098        */
099        console.log("\r\n-------------------------我是第四和五的方法分割线哦-----------------------------------------------------\r\n");
100 
101        // ------------------------------我是第四和五的方法分割线哦----------------------------------------------------------
102 
103        //第五种用法:用JSON.parse解析复杂json字符串
104        //(先用JSON.parse把复杂的json字符串变为json对象,在用for或者$.each循环取得里面的json数组,得到每一个对象)
105 
106        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)"}]}';
107        var dataObj = JSON.parse(data); //此时已变成json对象咯,下面可以直接得到json对象的值 和 json数组对象, 直接用$.each循环json数组对象取值啦
108        //得到单个json对象
109        console.log("第五种用法:用JSON.parse解析复杂json字符串,$.each循环");
110        console.log("得到json单个对象");
111        console.log("Name:--"   dataObj.Name);
112        console.log("ProUrl:--"   dataObj.ProUrl);
113        console.log("SiteID:--"   dataObj.SiteID);
114        console.log("得到json数组对象");
115        $.each(dataObj.SiteList, function (index, item) {
116            var result = item.Name   "--"   item.ProUrl   "--"   item.SiteInfo; //拼接数据,输出到控制台展示
117            console.log(result);
118        });
119        /*
120        现在看看复杂的json解析也不过如此吧,现在你已经掌握了jquery解析json的方法咯,大胆的在项目中运用吧!!!
121        */
122    </script>
123</body>
124</html>


原文链接:Jquery解析Json数组List方法大全