将平面数组转换为树结构

Question

我有一个从MySQL查询中获取的平面数组，但需要将其转换为树形结构。我已经尝试了一段时间，但似乎无法完成。

它基本上是用于Web应用程序中的导航。有些节点将有子节点，而另一些则不会。

我尝试过使用诸如reduce，map等ES6数组函数，但无法显示子元素。

这是结构...

[
  {
    "page_id": 1,
    "page_name": "dashboard",
    "path": "/",
    "page_icon": "dashboard",
    "sub_page_id": 0,
    "sub_page_name": null,
    "sub_page_path": null,
    "sub_page_icon": null,
    "parent_id": 0
  },
  {
    "page_id": 2,
    "page_name": "Transactions",
    "path": "/transactions",
    "page_icon": "swap_horiz",
    "sub_page_id": 0,
    "sub_page_name": null,
    "sub_page_path": null,
    "sub_page_icon": null,
    "parent_id": 0
  },
  {
    "page_id": 6,
    "page_name": "Reports",
    "path": null,
    "page_icon": null,
    "sub_page_id": 1,
    "sub_page_name": "Transactions Value",
    "sub_page_path": "/transactions-value",
    "sub_page_icon": "assessment",
    "parent_id": 6
  },
  {
    "page_id": 6,
    "page_name": "Reports",
    "path": null,
    "page_icon": null,
    "sub_page_id": 2,
    "sub_page_name": "Transactions Volume",
    "sub_page_path": "/transactions-volume",
    "sub_page_icon": "assessment",
    "parent_id": 6
  },
  {
    "page_id": 6,
    "page_name": "Reports",
    "path": null,
    "page_icon": null,
    "sub_page_id": 3,
    "sub_page_name": "Transactions Frequency",
    "sub_page_path": "/transactions-frequency",
    "sub_page_icon": "assessment",
    "parent_id": 6
  },
  {
    "page_id": 8,
    "page_name": "Holidays",
    "path": null,
    "page_icon": null,
    "sub_page_id": 7,
    "sub_page_name": "My Holidays",
    "sub_page_path": "/my-holidays",
    "sub_page_icon": "wb_sunny",
    "parent_id": 8
  },
  {
    "page_id": 8,
    "page_name": "Holidays",
    "path": null,
    "page_icon": null,
    "sub_page_id": 8,
    "sub_page_name": "Add User",
    "sub_page_path": "/add-user",
    "sub_page_icon": "person_add",
    "parent_id": 8
  },
  {
    "page_id": 8,
    "page_name": "Holidays",
    "path": null,
    "page_icon": null,
    "sub_page_id": 9,
    "sub_page_name": "Add Site",
    "sub_page_path": "/add-site",
    "sub_page_icon": "location_on",
    "parent_id": 8
  },
  {
    "page_id": 10,
    "page_name": "Logout",
    "path": "/logout",
    "page_icon": "input",
    "sub_page_id": 0,
    "sub_page_name": null,
    "sub_page_path": null,
    "sub_page_icon": null,
    "parent_id": 0
  }
]

Answer 1

只要抬起头，就可以使用reduce。

myArray.reduce((acc, curr) => {
  if (!curr.sub_page_id)
    acc[curr.page_id] = curr
  else
    acc[curr.page_id].children = acc[curr.page_id].children
      ? acc[curr.page_id].children[curr.sub_page_id] = curr
      : acc[curr.page_id].children = { [sub_page_id]: curr }
  return acc
}, {})

Answer 2

我已经做到了。可能不是最有效的方法，但是可以。

const data = response.data;
const tree = [];

data.reduce(function(a, b, i, r) {

    // Add the parent nodes
    if(a.page_id != b.page_id){
        tree.push({ page_id: a.page_id,
                        page_name: a.page_name,
                        page_path: a.path,
                        page_icon: a.page_icon
                    });
    }

    // Add the last parent node
    if(i+1 == data.length) {
        tree.push({ page_id: b.page_id,
                        page_name: b.page_name,
                        page_path: b.path,
                        page_icon: b.page_icon
                    });

        // Add the child nodes to the parent nodes
        data.reduce(function(a, b) {
            if(a.sub_page_id) {
                const find = tree.findIndex(f => f.page_id == a.parent_id);

                // Add the first child node to parent
                if(!("children" in tree[find])) {
                    tree[find].children = [];

                    tree[find].children.push({ page_id: a.sub_page_id,
                                                page_name: a.sub_page_name,
                                                page_path: a.sub_page_path,
                                                page_icon: a.sub_page_icon
                    });
                }
                // Add the remaining child nodes to parent nodes
                else {
                    tree[find].children.push({ page_id: a.sub_page_id,
                                                page_name: a.sub_page_name,
                                                page_path: a.sub_page_path,
                                                page_icon: a.sub_page_icon
                    });
                }
            }
            return b;
        });
    }
    return b;
});