1. 程式人生 > >遞迴取JSON資料

遞迴取JSON資料

示例一:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js" type="text/javascript"></script>
    <script>
        $(function () {
            var data = [{
                "id": "01",
                "name": "中國",
                "items": [{
                    "id": "0101",
                    "name": "北京市",
                    "items": [{
                        "id": "0101",
                        "name": "東城區"
                    }]
                }, {
                    "id": "0102",
                    "name": "郴州市",
                    "items": [{
                        "id": "0101",
                        "name": "安仁縣"
                    }]
                }]
            },
{
    "id": "02",
    "name": "美國"
}];
            $("#treeRoot").html(TreeHtml(data));
        });
        var strHtml = "";
        //遞迴實現樹結構
        function TreeHtml(data) {
            $.each(data, function (key, value) {
                strHtml += '<li id="li' + value.id + '"> ' + value.name;
                if (value.items && value.items.length > 0) {
                    strHtml += '<ul id="ul' + value.id + '">';
                    TreeHtml(value.items);
                    strHtml += '</ul>';
                }
                strHtml += ' </li>';
            });
            return strHtml;
        }
    </script>
</head>
<body>
    <div class="Tree">
        <ul id="treeRoot">
        </ul>
    </div>
</body>
</html>

示例二

<!DOCTYPE html>
    <head>
            <title>遞迴解析無限層級JSON的所有key和value</title>
        <script src="jquery-2.0.3.min.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div>
            <ul id="menu"></ul>
        </div>
        <script>
            var menulist = [{
                "menulist": [
                    { "MID": "M001", "MName": "首頁", "Url": "#", "menulist": "" },
                    { "MID": "M002", "MName": "車輛買賣", "Url": "#", "menulist":
                        [
                             { "MID": "M003", "MName": "新車", "Url": "#", "menulist":
                                [
                                    { "MID": "M006", "MName": "奧迪", "Url": "#", "menulist": "" },
                                    { "MID": "M007", "MName": "別克", "Url": "#", "menulist": "" }
                                ]
                             },
                             { "MID": "M004", "MName": "二手車", "Url": "#", "menulist": "" },
                             { "MID": "M005", "MName": "改裝車", "Url": "#", "menulist": "" }
                        ]
                    },
                    { "MID": "M006", "MName": "寵物", "Url": "#", "menulist": "" }
              ]
            }];
            $(function() {
                parseJson(menulist);
            });
            function parseJson(jsonObj) {
                if( typeof(jsonObj) == "undefined" ){
                    alert('JSON物件不能為空!');
                }
                //遍歷第一層資料
                for (var topKey in jsonObj) {
                    //如果物件型別為object型別且陣列長度大於0,遞迴繼續解析
                    if (jsonObj[topKey].length > 0 && typeof(jsonObj[topKey]) == "object") {
                        parseJson(jsonObj[topKey]);
                    } else {
                            //如果物件型別為object型別,依次迴圈取出所有元素
                            if (typeof(jsonObj[topKey]) == "object") {
                                for(var childKey in jsonObj[topKey]) {
                                    //如果物件型別為object型別,遞迴繼續解析
                                    if (typeof(jsonObj[topKey][childKey]) == "object") {
                                    parseJson(jsonObj[topKey][childKey]);
                                } else {
                                        //如果物件型別為object型別,直接取元素名稱和值
                                        $("#menu").append("<li>" + childKey + ":" + jsonObj[topKey][childKey] + "</li>");
                                }
                                }
                            } else{
                                    //如果物件型別為object型別,直接取元素名稱和值
                                    $("#menu").append("<li>" + childKey + ":" + jsonObj[topKey][childKey] + "</li>");
                            }
                    }
               }
            }
        </script>
    </body>
</html>