[英]Convert flat array to tree structure
I have a flat array that I'm getting from a MySQL query but I need to convert it into a tree structure.我有一个从 MySQL 查询中获取的平面数组,但我需要将其转换为树结构。 I've been trying to do this for a while now but can't seem to get it done.我已经尝试这样做了一段时间,但似乎无法完成。
It's basically for navigation in a web app.它基本上用于在网络应用程序中导航。 Some nodes will have children but others will not.一些节点会有子节点,但其他节点不会。
I've tried using ES6 array functions like reduce, map, etc but I can't get the child elements to show up.我试过使用 ES6 数组函数,如reduce、map 等,但无法显示子元素。
Here's the structure...这是结构...
[
{
"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
}
]
Just off the top of my head, you could use a reduce .就在我的头顶上,您可以使用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
}, {})
I've done it guys.我已经做到了伙计们。 May not be the most efficient method but it works.可能不是最有效的方法,但它有效。
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;
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.