JQuery递归解析无限层级JSON对象的所有key和value

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/a525390802/article/details/76293325

前一段时间做了一个小项目,要加一个json数据自动绑定前台表单的功能,类似于jquery-easyui里面的数据绑定(给它一个json对象,就能自动解析里面有的数据。json数据的key对于表单的name属性,也可以是id或自己定义的标签属性,把key对应的值赋给对应名称的表单)。百度了许多JSON解析,都是前提知道json结构的情况下的解析,毛线的一点用都没有,最后看了一篇博客,明白了解析key和值的原理,自己写了一个简单的coding(里面的json数据从网上copy过来的,哈哈),废话不多说,上代码:

<!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>

代码很简单,只用了for循环、递归以及一些json的知识点,jquery用的熟练的很容易就能看懂(不明白的可以参考这篇博客,地址),有什么需要改进的或有什么考虑不全的欢迎指出。

展开阅读全文

没有更多推荐了,返回首页