Reb*_*tGG 3 javascript ecmascript-6 reactjs
我正在尝试转换来自数据库的对象的平面数组,以提供给需要嵌套结构才能管理可扩展子行的反应表。
我制作了一个 CodeSandbox ,它非常不言自明:
https://codesandbox.io/s/tender-chatterjee-kdssi?file=/src/App.js
基本上,我的原始数据的结构如下:
[
{
code: "A0",
parent: ""
},
{
code: "A01",
parent: "A0"
},
{
code: "A011",
parent: "A01"
},
{
code: "B0",
parent: ""
},
{
code: "B01",
parent: "B0"
},
{
code: "B011",
parent: "B01"
}
]
Run Code Online (Sandbox Code Playgroud)
我想将其转换为以下结构:
[
{
code: "A0",
parent: "",
subRows: [
{
code: "A01",
parent: "A0",
subRows: [
{
code: "A011",
parent: "A01"
}
]
}
]
},
{
code: "B0",
parent: "",
subRows: [
{
code: "B01",
parent: "B0",
subRows: [
{
code: "B011",
parent: "B01"
}
]
}
]
}
]
Run Code Online (Sandbox Code Playgroud)
我已经尝试了一些递归方法来做到这一点,但他们留下了一些选项,所以我很乐意接受一些帮助。
谢谢。
这可以通过相当简单的递归方法来完成。
const mockData = [{
code: "A0",
parent: ""
},
{
code: "A01",
parent: "A0"
},
{
code: "A011",
parent: "A01"
},
{
code: "B0",
parent: ""
},
{
code: "B01",
parent: "B0"
},
{
code: "B011",
parent: "B01"
}
];
const hierarchize = (parent, list) => {
const children = list.filter(x => x.parent == parent.code);
children.forEach(child => hierarchize(child, list));
parent.subRows = children;
}
const topLevel = mockData.filter(x => x.parent == "");
topLevel.forEach(top => hierarchize(top, mockData));
console.log(topLevel);Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
904 次 |
| 最近记录: |