井井客

搜索

json数组转树型嵌套结构2

自己动手做了一个数组转树型嵌套,按照id,parentId来做关系的。

json数组转树型嵌套结构2

代码不是很复杂,里面有注释:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>json数组转树型嵌套结构2</title>
</head>
<body>
    <script>
        let data = [
            { id: 12, parentId: 5, name: "第二层5-2" },
            { id: 7, parentId: 1, name: "第二层1-2" },
            { id: 3, parentId: 0, name: "第一层3" },
            { id: 4, parentId: 0, name: "第一层4" },
            { id: 15, parentId: 9, name: "第三层3-1-1" },
            { id: 2, parentId: 0, name: "第一层2" },
            { id: 8, parentId: 1, name: "第二层1-3" },
            { id: 16, parentId: 20, name: "父Id不见了,不知道排到哪层暂且放到顶层吧" },
            { id: 14, parentId: 8, name: "第三层1-3-1" },
            { id: 6, parentId: 1, name: "第二层1-1" },
            { id: 13, parentId: 5, name: "第二层5-3" },
            { id: 5, parentId: 0, name: "第一层5" },
            { id: 10, parentId: 3, name: "第二层3-2" },
            { id: 1, parentId: 0, name: "第一层1" },
            { id: 9, parentId: 3, name: "第二层3-1" },
            { id: 11, parentId: 4, name: "第二层4-1" },
            { id: 27, parentId: 5, name: "第二层5-1" },
            { id: 29, parentId: 14, name: "第四层1-3-1-1" }
        ];

        function transformTree(arr, id, pid, rule) {
            let array = JSON.parse(JSON.stringify(arr));
            // 传进来的数组,记录id的索引值
            let indexs = [];
            // 将数组用key(父级id)-value(子级数组)形式暂存到temp
            /* 其实就是将parentId做为key,值为parentId指向它的对象组成的数组 */
            let temp = {};
            array.forEach((item,index)=>{
                indexs.push(String(item[id]));
                // 如果父级ID是空的话也转换成0
                let tempPid = item[pid] || 0;
                if(!temp[tempPid]){
                    temp[tempPid] = [];
                }
                temp[tempPid].push(array[index]);
            });
            
            // 新数组用于记录树状结果(我们在请求时常用的结构)
            let result = [];
            
            Object.keys(temp).forEach((key)=>{
                // 遍历temp的key从而接着遍历它的value(子级数组),然后将子级数组添加下一级
                temp[key].forEach((item,i)=>{
                    if(indexs.indexOf(String(item[id])) > -1){
                        if(!item.children){
                            item.children = [];
                        }
                        if(temp[item[id]]){
                            item.children.push(temp[item[id]]);
                        }
                    }
                });
                // 对比key与indexs,找不到索引值的表示没有再上面的父级,暂时存找结果集
                if(indexs.indexOf(String(key)) === -1){
                    result.push(temp[key])
                }
            });

            // 判断参数rule是否传值,传值的话就取出对应的数据,否则将result值(数组)合并
            if (rule !== null && rule !== undefined) {
                // 和上面的 父级ID是空的情况呼应
                return result[rule || 0];
            } else {
                let rs = [];
                for (let key in result) {
                    rs = rs.concat(result[key])
                }
                return rs;
            }
        }
        
        // 不过滤-找不到父节点的结果
        let treeData = transformTree(data, 'id', 'parentId');
        // 过滤-指定根id的结果
        // let treeData = transformTree(data,'id', 'parentId',0);

        console.log(treeData)
    </script>
</body>
</html>

从上往下看还是满容易理解的。先是将所有parentId,以及这个parentId的"儿子"列出一个key-value的对象。

然后在这个对象中,每一个值(数组)中去插入它的儿子们。因为对象赋值是地址值,所以很容易把这颗树做出来。

最后在这个对象中,过滤没有上级parentId的集合(例如1的parentId是0,但是0不在这个对象的key列表中,那就表示0已经是到底了)。

大致的思路是这样的,如果有说明不好的地方,欢迎指正,请轻拍~~

文章TAG:JS

作者:井井客整理来源:原创
本文标题:json数组转树型嵌套结构2
本文链接:/c/18348.html

上一篇:css隐藏元素
下一篇:JS多维数组转一维数组

文章分类

相关阅读

随便看看