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-Jsons.cn</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>


原文鏈接:Jquery解析Json數組List方法大全