如果所有类别都在同一个对象数组中，如何在其类别下列出多级子类别

Question

我正在处理带有子类别的类别的下拉菜单，有些子类别也有子类别。我有一个来自服务器的具有parent_id属性的类别数组，我想在客户端创建另一个具有自定义结构的数组
parent_id : null用于主类别。

来自服务器的类别数组

const categories = [
{ id: "10001", name: "name1", parent_id: null },
{ id: "10002", name: "name2", parent_id: "10001" },
{ id: "10003", name: "name3", parent_id: "10001" },
{ id: "10004", name: "name4", parent_id: null },
{ id: "10005", name: "name5", parent_id: null },
{ id: "10006", name: "name6", parent_id: "10002" },
{ id: "10007", name: "name7", parent_id: "10002" },
{ id: "10008", name: "name8", parent_id: "10003" },
{ id: "10009", name: "name9", parent_id: "10004" },
]

我的预期结果

const categories= [
{
id: "10001",
name: "name1",
subCategories: [
{
id: "10002",
name: "name2",
subCategories: [
{ id: "10006", name: "name6" },
{ id: "10007", name: "name7" },
],
},
{
id: "10003",
name: "name3",
subcategories: [{ id: "10008", name: "name8", parent_id: "10003" }],
},
],
},
{
id: "10004",
name: "name4",
subCategories: [{ id: "10009", name: "name9", parent_id: "10004" }],
},
{ id: "10005", name: "name5" , subCategories: [] },
]

我的代码

这段代码给出了lvl-1和lvl-2类别，但我们希望在任何lvl中都包含所有子类别。

const result = categories
.map((category, index, array) => {
if (category.parent_id === null) {
return {
...category,
subCategory: array.filter((cat) => cat.parent_id === category.id),
}
}
return null; // insert null in array
})
.filter((category) => category); // filter null items from array
// output

[
{
"id": "10001",
"name": "name1",
"parent_id": null,
"subCategory": [
{
"id": "10002",
"name": "name1",
"parent_id": "10001"
},
{
"id": "10003",
"name": "name1",
"parent_id": "10001"
}
]
},
{
"id": "10004",
"name": "name1",
"parent_id": null,
"subCategory": [
{
"id": "10009",
"name": "name1",
"parent_id": "10004"
}
]
},
{
"id": "10005",
"name": "name1",
"parent_id": null,
"subCategory": []
}
]

如您所见，这些类别{ id: "10006"}、{ id: "10007"}、{ id: "10008"}不在此
在这个例子中，我们只有3级的子类别，但可能有更多的子类别
谢谢。

Answer 1

您可以循环遍历具有parent_id的所有类别，并将它们分配给其父类别
然后，在原始数组中，筛选出具有父级的所有类别。

let categories = [
{ id: "10001", name: "name1", parent_id: null },
{ id: "10002", name: "name2", parent_id: "10001" },
{ id: "10003", name: "name3", parent_id: "10001" },
{ id: "10004", name: "name4", parent_id: null },
{ id: "10005", name: "name5", parent_id: null },
{ id: "10006", name: "name6", parent_id: "10002" },
{ id: "10007", name: "name7", parent_id: "10002" },
{ id: "10008", name: "name8", parent_id: "10003" },
{ id: "10009", name: "name9", parent_id: "10004" },
];
categories
.filter(c => c.parent_id) // For all categories that have a parent, 
.forEach(c => {          // Assign them to that parent.
const parent = categories.find(p => p.id === c.parent_id);
parent.subCategories = parent.subCategories || [];
parent.subCategories.push(c);
});
// Now only give me categories that have no parent.
categories = categories.filter(c => !c.parent_id);
console.log(categories);