zoukankan      html  css  js  c++  java
  • 递归处理后端传来的数据,处理成能使用的vue路由格式

    	 // 递归处理后端传来的数据,处理成能使用的vue路由格式
            // pid为0代表一级路由,pid如果和pid为0的id相等的话代表二级路由... 以此类推...
            var arr = [
                { "pid": 0, "id": 3, "name": "最外层3" },
                { "pid": 0, "id": 4, "name": "最外层4" },
                { "pid": 4, "id": 5, "name": "最外层-4" },
                { "pid": 5, "id": 6, "name": "最外层-4-1" },
                { "pid": 0, "id": 7, "name": "最外层7" },
                { "pid": 7, "id": 8, "name": "最外层-7" },
                { "pid": 0, "id": 9, "name": "最外层9" },
                { "pid": 9, "id": 10, "name": "最外层9-1" },
                { "pid": 9, "id": 11, "name": "最外层9-2" },
                { "pid": 11, "id": 12, "name": "最外层9-2-1" }
            ];
            var map = {};
            arr.forEach(function (item) {
                map[item.id] = item;
            });
            console.log(map,'map')
            var newData = [];
            arr.forEach(function (item) {
                // 根据当前遍历对象的pid,去map对象中找到对应索引的id
                var parent = map[item.pid]; 
                if (parent) {
                    // 如果找到索引,那么说明此项不在顶级当中,那么需要把此项添加到,他对应的父级中
                    (parent.children || (parent.children = [])).push(item);
                } else {
                    //如果没有在map中找到对应的索引ID,那么直接把当前的item添加到newData结果集中作为顶级
                    newData.push(item);
                }
            });
            console.log(newData,'newData')
    
    

    https://oss.wangmiaozero.cn/userPicList/20210425/a0c16ca0-a5d5-11eb-a11c-8544bab9108a.png

      var array = [
                    {"pid":0,"id":3,"name":"最外层3"},
                    {"pid":0,"id":4,"name":"最外层4"},
                    {"pid":4,"id":5,"name":"最外层-4"},
                    {"pid":5,"id":6,"name":"最外层-4-1"},
                    {"pid":0,"id":7,"name":"最外层7"},
                    {"pid":7,"id":8,"name":"最外层-7"},
                    {"pid":0,"id":9,"name":"最外层9"},
                    {"pid":9,"id":10,"name":"最外层9-1"},
                    {"pid":9,"id":11,"name":"最外层9-2"},
                    {"pid":11,"id":12,"name":"最外层9-2-1"}
            ];
            for (let index = 0; index < array.length; index++) {
                array[index].children=[] 
            }
            // 遍历出树结构json
            function getVal(data, ppKey) {
                let temp = ppKey ? data[ppKey] : data
                for (let key in temp) {
                    if (!(temp[key] instanceof Object) && key === 'id') {
                        data.forEach(function (item) {
                            if (item.pid === temp.id) {
                                temp.children.push(item)
                            }
                        })
                    }
                    if (temp[key] instanceof Object || temp[key] instanceof Array) {
                        getVal(temp, key)
                    }
                }
            }
            getVal(array)
            forSp(array)
            // 去除多余的数据
            function forSp(data) {
                data.forEach(function (item, index) {
                    // 这里if条件 假如 一级路由的pid全都是0就以此为标识
                    if (item.pid != 0) {
                        data.splice(index, 1)
                        forSp(data)
                    }
                })
            }
            console.log(array)
    
    Sometimes you need to applaud yourself
  • 相关阅读:
    HDU 5744
    HDU 5815
    POJ 1269
    HDU 5742
    HDU 4609
    fzu 1150 Farmer Bill's Problem
    fzu 1002 HangOver
    fzu 1001 Duplicate Pair
    fzu 1150 Farmer Bill's Problem
    fzu 1182 Argus 优先队列
  • 原文地址:https://www.cnblogs.com/tuziling/p/14810605.html
Copyright © 2011-2022 走看看