一维数组处理成拥有children树结构数据

最新推荐文章于 2023-07-07 15:19:05 发布

IT_Bonnie

最新推荐文章于 2023-07-07 15:19:05 发布

阅读量807

点赞数 1

分类专栏：前端文章标签： vue.js 前端

原文链接：https://blog.csdn.net/qq_41579104/article/details/113996807

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

该博客主要介绍了一个JavaScript函数`getTreeData`，用于将数组数据转换为树形结构。通过`arrayToJson`辅助函数，遍历数据并根据`fid`字段构建父子关系。当`fid`在原始数据中找到对应的`id`时，将其作为子节点添加到父节点的`children`数组中，若找不到则作为顶层节点。这个过程有助于组织和展示层级化的数据。

摘要由CSDN通过智能技术生成

function getTreeData(id) {
        var self = this;
        data = [{
            id: "5",
            name: "二级目录0",
            lv: "1",
            catalogs: [],
            fid: "0"
        },{
            id: "8",
            name: "二级目录1",
            lv: "2",
            catalogs: [],
            fid: "5"
        }];
        data = self.arrayToJson(data)
        console.log(self.arrayToJson(data))
    }
    function arrayToJson(treeArray) {
        var res = [];
        var tmpMap = {};
        for (var i = 0, l = treeArray.length; i < l; i++) {
            // 以每条数据的id作为obj的key值，数据作为value值存入到一个临时对象里面
            tmpMap[treeArray[i]["id"]] = treeArray[i];
        }
        for (i = 0, l = treeArray.length; i < l; i++) {
            var key = tmpMap[treeArray[i]["fid"]];
            console.log("key", key);
            //循环每一条数据的 fid，假如这个临时对象有这个key值，就代表这个key对应的数据有children，需要Push进去
            //如果这一项数据属于哪个数据的子级
            if (key) {
                // 如果这个数据没有children
                if (!key["children"]) {
                    key["children"] = [];
                    key["children"].push(treeArray[i]);
                    // 如果这个数据有children
                } else {
                    key["children"].push(treeArray[i]);
                }
            } else {
                //如果没有这个Key值，就代表找不到属于哪个数据，那就代表没有父级,直接放在最外层
                res.push(treeArray[i]);
            }
        }
        return res;
    }