前端扁平数据转为树形结构数据

树形结构数据转化

背景:在做后台管理平台的时候,经常会有tree的应用,有时后端一个接口可能有多处使用,这时候就需要前端去处理数据.不多说,直接上代码

   let jsonData = [
      { id: 1, parentId: 0, name: "一级菜单A" },
      { id: 2, parentId: 0, name: "一级菜单B" },
      { id: 3, parentId: 0, name: "一级菜单C" },
      { id: 4, parentId: 1, name: "二级菜单A-A" },
      { id: 5, parentId: 1, name: "二级菜单A-B" },
      { id: 6, parentId: 2, name: "二级菜单B-A" },
      { id: 7, parentId: 1, name: "三级菜单A-A-A" },
      { id: 8, parentId: 7, name: "四级菜单A-A-A-A" },
      { id: 9, parentId: 8, name: "五级菜单A-A-A-A-A" }
    ];

    let root = "0"; //根节点
    let parentKey = "parentId"; //节点字段名
    let key = "id";
    function formatTree(obj, root, parentKey, key) {
      const copyedObj = obj;
      return copyedObj.filter(parent => {
        let child = copyedObj.filter(item => {
          return parent[key] == item[parentKey];
        });
        if (child.length > 0) {
          parent.children = child;
        } else {
          parent.children = [];
        }
        return parent[parentKey] == 0; //返回顶层，依据实际情况判断这里的返回值
      });
    }

输出结果

[
    {
        "id":1,
        "parentId":0,
        "name":"一级菜单A",
        "children":[
            {
                "id":4,
                "parentId":1,
                "name":"二级菜单A-A",
                "children":[

                ]
            },
            {
                "id":5,
                "parentId":1,
                "name":"二级菜单A-B",
                "children":[

                ]
            },
            {
                "id":7,
                "parentId":1,
                "name":"三级菜单A-A-A",
                "children":[
                    {
                        "id":8,
                        "parentId":7,
                        "name":"四级菜单A-A-A-A",
                        "children":[
                            {
                                "id":9,
                                "parentId":8,
                                "name":"五级菜单A-A-A-A-A",
                                "children":[

                                ]
                            }
                        ]
                    }
                ]
            }
        ]
    },
    {
        "id":2,
        "parentId":0,
        "name":"一级菜单B",
        "children":[
            {
                "id":6,
                "parentId":2,
                "name":"二级菜单B-A",
                "children":[

                ]
            }
        ]
    },
    {
        "id":3,
        "parentId":0,
        "name":"一级菜单C",
        "children":[

        ]
    }
]