• js解析多层嵌套的json,取出所有父元素属性和遍历所有子元素


    已知一个多层嵌套的json,取出所有父元素和子元素的id值

    思路:因为不知道到底嵌套了多少层,递归有可能造成栈溢出、查询时间特别久的问题

    所以先查询一次,判断是否有子节点,如果有,取出子节点并到父节点上,并动态更改数据长度,这样无限循环处理json取出所有id

                menuIdInit () {
                    var _this = this;
                    var _menu = _this.menus;
                    var menuId = [];
                    var len = _menu.length;
                    for(var i = 0; i < len; i++){
                        var item = _menu[i] ;
                        if(item.child && item.child.length != 0){
                            var child = item.child ;
                            for(var j = 0; j < child.length; j++){
                                _menu[len + j] = child[j] ;
                            }
                            len = _menu.length ;
                        }
                        menuId.push(item.id);
                    }
                    this.menusTree = menuId ;          
                },

    已知子节点id取出所有父节点id的方法

    思路和上面的一样,不过更复杂了一点

    一个N层嵌套的json

    1。先遍历json数据,做处理,取出所有children节点并到原始数据上并给了新属性parentNode,它的值是所有他的上一级的父节点id

    2。遍历查询id,只需要查询最外面一层的id就是所有子节点和父节点的id属性了

    3。获取值

    //json的处理
    function searchInit(json) {
        var newJson = json.concat([]);
        var len = newJson.length;   //长度
        var parentNode = [];
        console.log('newJson', newJson);
        for (var i = 0; i < len; i++) {
            var item = newJson[i];
            if (item.children && item.children.length != 0) {
                var child = item.children;
                for (var j = 0; j < child.length; j++) {
                    if (item.parentNode) {
                        child[j].parentNode = item.parentNode.concat([item.id]);
                    }
                    else {
                        child[j].parentNode = [item.id]
                    }
                    console.log(item.parentNode, item.id);
                    newJson[len + j] = child[j];
                }
                len = newJson.length;
            }
        }
        return newJson;
    
    }
    
    //搜索当前权限,获得所有父级权限id
    function searchTree(json, id) {
    console.log("tree",json);
        var newJson = json.concat([]);
        var len = newJson.length;   //长度
        console.log("json",len);
        var parentNode = [];
        //查找id
        for (var s = 0; s < len; s++) {
            if (newJson[s].id == id) {
                if (newJson[s].parentNode == null || newJson[s].parentNode.length == 0) {
                    parentNode = [];
                }
                else {
                    parentNode = newJson[s].parentNode;
                }
            }
            else {
                continue;
            }
        }
        return parentNode;
    }
    
    //获取最终所有权限列表id
    //json :最初的权限列表
    //keys :用户点击获取Vue获取到的最底层权限id数组
    function getKeys(json, keys) {
        var final = [];
        for (var i = 0; i < keys.length; i++) {
            var final = searchTree(json, keys[i]).concat(final);
        }
        if (json.length == 0 || keys.length == 0) {
            return [];
        }
        else {
            var c = $.unique((final.concat(keys)).sort());
            return  c;
        }
    }

    JSON数据

    {
        "children": [
            {
                "children": [
                    {
                        "children": [
                            {
                                "children": null,
                                "name": "浏览",
                                "id": 443,
                                "label": "浏览",
                                "open": true,
                                "parentNode": [
                                    121,
                                    232,
                                    411
                                ]
                            },
                            {
                                "children": null,
                                "name": "批量删除",
                                "id": 420,
                                "label": "批量删除",
                                "open": true,
                                "parentNode": [
                                    121,
                                    232,
                                    411
                                ]
                            },
                            {
                                "children": null,
                                "name": "搜索",
                                "id": 415,
                                "label": "搜索",
                                "open": true,
                                "parentNode": [
                                    121,
                                    232,
                                    411
                                ]
                            },
                            {
                                "children": null,
                                "name": "删除",
                                "id": 414,
                                "label": "删除",
                                "open": true,
                                "parentNode": [
                                    121,
                                    232,
                                    411
                                ]
                            },
                            {
                                "children": null,
                                "name": "编辑",
                                "id": 413,
                                "label": "编辑",
                                "open": true,
                                "parentNode": [
                                    121,
                                    232,
                                    411
                                ]
                            },
                            {
                                "children": null,
                                "name": "新增",
                                "id": 412,
                                "label": "新增",
                                "open": true,
                                "parentNode": [
                                    121,
                                    232,
                                    411
                                ]
                            }
                        ],
                        "name": "芯片备案",
                        "id": 411,
                        "label": "芯片备案",
                        "open": true,
                        "parentNode": [
                            121,
                            232
                        ]
                    },
                    {
                        "children": [
                            {
                                "children": null,
                                "name": "编辑",
                                "id": 403,
                                "label": "编辑",
                                "open": true,
                                "parentNode": [
                                    121,
                                    232,
                                    401
                                ]
                            },
                            {
                                "children": null,
                                "name": "新增",
                                "id": 402,
                                "label": "新增",
                                "open": true,
                                "parentNode": [
                                    121,
                                    232,
                                    401
                                ]
                            }
                        ],
                        "name": "软件版本管理",
                        "id": 401,
                        "label": "软件版本管理",
                        "open": true,
                        "parentNode": [
                            121,
                            232
                        ]
                    },
                    {
                        "children": [
                            {
                                "children": [
                                    {
                                        "children": null,
                                        "name": "浏览",
                                        "id": 442,
                                        "label": "浏览",
                                        "open": true,
                                        "parentNode": [
                                            121,
                                            232,
                                            241,
                                            371
                                        ]
                                    },
                                    {
                                        "children": null,
                                        "name": "删除",
                                        "id": 374,
                                        "label": "删除",
                                        "open": true,
                                        "parentNode": [
                                            121,
                                            232,
                                            241,
                                            371
                                        ]
                                    },
                                    {
                                        "children": null,
                                        "name": "编辑",
                                        "id": 373,
                                        "label": "编辑",
                                        "open": true,
                                        "parentNode": [
                                            121,
                                            232,
                                            241,
                                            371
                                        ]
                                    },
                                    {
                                        "children": null,
                                        "name": "新增",
                                        "id": 372,
                                        "label": "新增",
                                        "open": true,
                                        "parentNode": [
                                            121,
                                            232,
                                            241,
                                            371
                                        ]
                                    }
                                ],
                                "name": "内容源支持项管理",
                                "id": 371,
                                "label": "内容源支持项管理",
                                "open": true,
                                "parentNode": [
                                    121,
                                    232,
                                    241
                                ]
                            },
                            {
                                "children": [
                                    {
                                        "children": [
                                            {
                                                "children": null,
                                                "name": "浏览",
                                                "id": 441,
                                                "label": "浏览",
                                                "open": true,
                                                "parentNode": [
                                                    121,
                                                    232,
                                                    241,
                                                    311,
                                                    351
                                                ]
                                            },
                                            {
                                                "children": null,
                                                "name": "删除",
                                                "id": 354,
                                                "label": "删除",
                                                "open": true,
                                                "parentNode": [
                                                    121,
                                                    232,
                                                    241,
                                                    311,
                                                    351
                                                ]
                                            },
                                            {
                                                "children": null,
                                                "name": "编辑",
                                                "id": 353,
                                                "label": "编辑",
                                                "open": true,
                                                "parentNode": [
                                                    121,
                                                    232,
                                                    241,
                                                    311,
                                                    351
                                                ]
                                            },
                                            {
                                                "children": null,
                                                "name": "新增",
                                                "id": 352,
                                                "label": "新增",
                                                "open": true,
                                                "parentNode": [
                                                    121,
                                                    232,
                                                    241,
                                                    311,
                                                    351
                                                ]
                                            }
                                        ],
                                        "name": "一体机管理",
                                        "id": 351,
                                        "label": "一体机管理",
                                        "open": true,
                                        "parentNode": [
                                            121,
                                            232,
                                            241,
                                            311
                                        ]
                                    },
                                    {
                                        "children": [
                                            {
                                                "children": null,
                                                "name": "浏览",
                                                "id": 440,
                                                "label": "浏览",
                                                "open": true,
                                                "parentNode": [
                                                    121,
                                                    232,
                                                    241,
                                                    311,
                                                    341
                                                ]
                                            },
                                            {
                                                "children": null,
                                                "name": "删除",
                                                "id": 344,
                                                "label": "删除",
                                                "open": true,
                                                "parentNode": [
                                                    121,
                                                    232,
                                                    241,
                                                    311,
                                                    341
                                                ]
                                            },
                                            {
                                                "children": null,
                                                "name": "编辑",
                                                "id": 343,
                                                "label": "编辑",
                                                "open": true,
                                                "parentNode": [
                                                    121,
                                                    232,
                                                    241,
                                                    311,
                                                    341
                                                ]
                                            },
                                            {
                                                "children": null,
                                                "name": "新增",
                                                "id": 342,
                                                "label": "新增",
                                                "open": true,
                                                "parentNode": [
                                                    121,
                                                    232,
                                                    241,
                                                    311,
                                                    341
                                                ]
                                            }
                                        ],
                                        "name": "遥控器管理",
                                        "id": 341,
                                        "label": "遥控器管理",
                                        "open": true,
                                        "parentNode": [
                                            121,
                                            232,
                                            241,
                                            311
                                        ]
                                    },
                                    {
                                        "children": [
                                            {
                                                "children": null,
                                                "name": "浏览",
                                                "id": 439,
                                                "label": "浏览",
                                                "open": true,
                                                "parentNode": [
                                                    121,
                                                    232,
                                                    241,
                                                    311,
                                                    331
                                                ]
                                            },
                                            {
                                                "children": null,
                                                "name": "删除",
                                                "id": 334,
                                                "label": "删除",
                                                "open": true,
                                                "parentNode": [
                                                    121,
                                                    232,
                                                    241,
                                                    311,
                                                    331
                                                ]
                                            },
                                            {
                                                "children": null,
                                                "name": "编辑",
                                                "id": 333,
                                                "label": "编辑",
                                                "open": true,
                                                "parentNode": [
                                                    121,
                                                    232,
                                                    241,
                                                    311,
                                                    331
                                                ]
                                            },
                                            {
                                                "children": null,
                                                "name": "新增",
                                                "id": 332,
                                                "label": "新增",
                                                "open": true,
                                                "parentNode": [
                                                    121,
                                                    232,
                                                    241,
                                                    311,
                                                    331
                                                ]
                                            }
                                        ],
                                        "name": "蓝牙管理",
                                        "id": 331,
                                        "label": "蓝牙管理",
                                        "open": true,
                                        "parentNode": [
                                            121,
                                            232,
                                            241,
                                            311
                                        ]
                                    },
                                    {
                                        "children": [
                                            {
                                                "children": null,
                                                "name": "浏览",
                                                "id": 438,
                                                "label": "浏览",
                                                "open": true,
                                                "parentNode": [
                                                    121,
                                                    232,
                                                    241,
                                                    311,
                                                    321
                                                ]
                                            },
                                            {
                                                "children": null,
                                                "name": "删除",
                                                "id": 324,
                                                "label": "删除",
                                                "open": true,
                                                "parentNode": [
                                                    121,
                                                    232,
                                                    241,
                                                    311,
                                                    321
                                                ]
                                            },
                                            {
                                                "children": null,
                                                "name": "编辑",
                                                "id": 323,
                                                "label": "编辑",
                                                "open": true,
                                                "parentNode": [
                                                    121,
                                                    232,
                                                    241,
                                                    311,
                                                    321
                                                ]
                                            },
                                            {
                                                "children": null,
                                                "name": "新增",
                                                "id": 322,
                                                "label": "新增",
                                                "open": true,
                                                "parentNode": [
                                                    121,
                                                    232,
                                                    241,
                                                    311,
                                                    321
                                                ]
                                            }
                                        ],
                                        "name": "Wi-Fi管理",
                                        "id": 321,
                                        "label": "Wi-Fi管理",
                                        "open": true,
                                        "parentNode": [
                                            121,
                                            232,
                                            241,
                                            311
                                        ]
                                    }
                                ],
                                "name": "硬件型号管理",
                                "id": 311,
                                "label": "硬件型号管理",
                                "open": true,
                                "parentNode": [
                                    121,
                                    232,
                                    241
                                ]
                            },
                            {
                                "children": [
                                    {
                                        "children": [
                                            {
                                                "children": null,
                                                "name": "浏览",
                                                "id": 437,
                                                "label": "浏览",
                                                "open": true,
                                                "parentNode": [
                                                    121,
                                                    232,
                                                    241,
                                                    291,
                                                    296
                                                ]
                                            },
                                            {
                                                "children": null,
                                                "name": "删除",
                                                "id": 299,
                                                "label": "删除",
                                                "open": true,
                                                "parentNode": [
                                                    121,
                                                    232,
                                                    241,
                                                    291,
                                                    296
                                                ]
                                            },
                                            {
                                                "children": null,
                                                "name": "编辑",
                                                "id": 298,
                                                "label": "编辑",
                                                "open": true,
                                                "parentNode": [
                                                    121,
                                                    232,
                                                    241,
                                                    291,
                                                    296
                                                ]
                                            },
                                            {
                                                "children": null,
                                                "name": "新增",
                                                "id": 297,
                                                "label": "新增",
                                                "open": true,
                                                "parentNode": [
                                                    121,
                                                    232,
                                                    241,
                                                    291,
                                                    296
                                                ]
                                            }
                                        ],
                                        "name": "RAM",
                                        "id": 296,
                                        "label": "RAM",
                                        "open": true,
                                        "parentNode": [
                                            121,
                                            232,
                                            241,
                                            291
                                        ]
                                    },
                                    {
                                        "children": [
                                            {
                                                "children": null,
                                                "name": "浏览",
                                                "id": 436,
                                                "label": "浏览",
                                                "open": true,
                                                "parentNode": [
                                                    121,
                                                    232,
                                                    241,
                                                    291,
                                                    292
                                                ]
                                            },
                                            {
                                                "children": null,
                                                "name": "删除",
                                                "id": 295,
                                                "label": "删除",
                                                "open": true,
                                                "parentNode": [
                                                    121,
                                                    232,
                                                    241,
                                                    291,
                                                    292
                                                ]
                                            },
                                            {
                                                "children": null,
                                                "name": "编辑",
                                                "id": 294,
                                                "label": "编辑",
                                                "open": true,
                                                "parentNode": [
                                                    121,
                                                    232,
                                                    241,
                                                    291,
                                                    292
                                                ]
                                            },
                                            {
                                                "children": null,
                                                "name": "新增",
                                                "id": 293,
                                                "label": "新增",
                                                "open": true,
                                                "parentNode": [
                                                    121,
                                                    232,
                                                    241,
                                                    291,
                                                    292
                                                ]
                                            }
                                        ],
                                        "name": "EMMC",
                                        "id": 292,
                                        "label": "EMMC",
                                        "open": true,
                                        "parentNode": [
                                            121,
                                            232,
                                            241,
                                            291
                                        ]
                                    }
                                ],
                                "name": "储存选项管理",
                                "id": 291,
                                "label": "储存选项管理",
                                "open": true,
                                "parentNode": [
                                    121,
                                    232,
                                    241
                                ]
                            },
                            {
                                "children": [
                                    {
                                        "children": null,
                                        "name": "新增",
                                        "id": 282,
                                        "label": "新增",
                                        "open": true,
                                        "parentNode": [
                                            121,
                                            232,
                                            241,
                                            281
                                        ]
                                    }
                                ],
                                "name": "屏幕尺寸管理",
                                "id": 281,
                                "label": "屏幕尺寸管理",
                                "open": true,
                                "parentNode": [
                                    121,
                                    232,
                                    241
                                ]
                            },
                            {
                                "children": [
                                    {
                                        "children": null,
                                        "name": "新增",
                                        "id": 272,
                                        "label": "新增",
                                        "open": true,
                                        "parentNode": [
                                            121,
                                            232,
                                            241,
                                            271
                                        ]
                                    }
                                ],
                                "name": "Android版本管理",
                                "id": 271,
                                "label": "Android版本管理",
                                "open": true,
                                "parentNode": [
                                    121,
                                    232,
                                    241
                                ]
                            },
                            {
                                "children": [
                                    {
                                        "children": null,
                                        "name": "删除",
                                        "id": 264,
                                        "label": "删除",
                                        "open": true,
                                        "parentNode": [
                                            121,
                                            232,
                                            241,
                                            261
                                        ]
                                    },
                                    {
                                        "children": null,
                                        "name": "编辑",
                                        "id": 263,
                                        "label": "编辑",
                                        "open": true,
                                        "parentNode": [
                                            121,
                                            232,
                                            241,
                                            261
                                        ]
                                    },
                                    {
                                        "children": null,
                                        "name": "新增",
                                        "id": 262,
                                        "label": "新增",
                                        "open": true,
                                        "parentNode": [
                                            121,
                                            232,
                                            241,
                                            261
                                        ]
                                    }
                                ],
                                "name": "品牌管理",
                                "id": 261,
                                "label": "品牌管理",
                                "open": true,
                                "parentNode": [
                                    121,
                                    232,
                                    241
                                ]
                            },
                            {
                                "children": [
                                    {
                                        "children": null,
                                        "name": "删除",
                                        "id": 254,
                                        "label": "删除",
                                        "open": true,
                                        "parentNode": [
                                            121,
                                            232,
                                            241,
                                            251
                                        ]
                                    },
                                    {
                                        "children": null,
                                        "name": "编辑",
                                        "id": 253,
                                        "label": "编辑",
                                        "open": true,
                                        "parentNode": [
                                            121,
                                            232,
                                            241,
                                            251
                                        ]
                                    },
                                    {
                                        "children": null,
                                        "name": "新增",
                                        "id": 252,
                                        "label": "新增",
                                        "open": true,
                                        "parentNode": [
                                            121,
                                            232,
                                            241,
                                            251
                                        ]
                                    }
                                ],
                                "name": "内容商管理",
                                "id": 251,
                                "label": "内容商管理",
                                "open": true,
                                "parentNode": [
                                    121,
                                    232,
                                    241
                                ]
                            }
                        ],
                        "name": "机型属性配置",
                        "id": 241,
                        "label": "机型属性配置",
                        "open": true,
                        "parentNode": [
                            121,
                            232
                        ]
                    }
                ],
                "name": "基础数据管理",
                "id": 232,
                "label": "基础数据管理",
                "open": true,
                "parentNode": [
                    121
                ]
            },
            {
                "children": [
                    {
                        "children": null,
                        "name": "新增",
                        "id": 142,
                        "label": "新增",
                        "open": true,
                        "parentNode": [
                            121,
                            141
                        ]
                    }
                ],
                "name": "机型备案",
                "id": 141,
                "label": "机型备案",
                "open": true,
                "parentNode": [
                    121
                ]
            },
            {
                "children": null,
                "name": "报备管理",
                "id": 131,
                "label": "报备管理",
                "open": true,
                "parentNode": [
                    121
                ]
            }
        ],
        "name": "设备管理",
        "id": 121,
        "label": "设备管理",
        "open": true
    }

     我又写了一个简单一点的方法:

    ES6对数组有新增的很简单的方法,有兴趣的可以尝试下,我忘记怎么用了,以后再更新

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    
    <body>
        <button onclick="add()">添加父节点</button>
        <script>
            var demo = [{
                "children": [{
                    "children": [{
                        "children": [{
                            "children": [{
                                "children": [{
                                    "children": [],
                                    "index": "111111"
                                }],
                                "index": "11111"
                            }, {
                                "children": [],
                                "index": "11112"
                            }],
                            "index": "1111"
                        }, {
                            "children": [],
                            "index": "1112"
                        }],
                        "index": "111"
                    }, {
                        "children": [{
                            "children": [],
                            "index": "1121"
                        }, {
                            "children": [],
                            "index": "1122"
                        }],
                        "index": "112"
                    }, {
                        "children": [],
                        "index": "113"
                    }],
                    "index": "11"
                }, {
                    "children": [],
                    "index": "12"
                }],
                "index": "1"
            }];
            console.log("old", demo);
    
            function add() {
                init(demo);
                addNode(demo)
                console.log("new", demo);
            }
    
            function init(item) {
                for (let i = 0; i < item.length; i++) {
                    item[i]["parent"] = [];
                    item[i]["parent"].push(item[i]["index"]);
                    if (item[i].children.length !== 0) {
                        var oChild = item[i].children;
                        init(oChild);
                    }
                }
                return item;
            }
    
            function addNode(item) {
                // debugger
                for (let i = 0; i < item.length; i++) {
                    var parent = item[i]["parent"];
                    if (item[i].children.length !== 0) {
                        var oChild = item[i].children;
                        for (let j = 0; j < oChild.length; j++) {
                            console.log("oChild", oChild);
                            oChild[j]["parent"] = oChild[j]["parent"].concat(parent);
                        }
                        addNode(oChild);
                    }
                }
                return item;
            }
        </script>
    </body>
    
    </html>
    

      

  • 相关阅读:
    解决Spring MVC无法接收AJAX使用PUT与DELETE请求传输的内容
    js中定时器setTimeout与setInterval使用方法经验总结
    解决ajax请求(SpringMVC后台)响应415/400/405错误
    css3 calc()的用法
    echarts2 饼图处理标签文字过长使之达到指定字数换行的目的
    在webstorm开发微信小程序之使用阿里自定义字体图标
    webstorm的一些小技巧
    前端 一些小知识,技巧总结
    用webstorm来开发微信小程序之less的配置
    js,mui,jq 操作基本的DOM
  • 原文地址:https://www.cnblogs.com/calamus/p/7466085.html
Copyright © 2020-2023  润新知