对具有子 - 父依赖项的数组进行排序

Question

我得到了以下对象数组：

let data = [{id: 3, name: ''}, {id: 4, name: ''}, {id: 5, name: '', parent: 3}, {id: 6, name: '', parent: 5},   {id: 7, name: '', parent: 4}, {id: 8, name: '', parent: 8}];

如何创建一个嵌套列表，其中具有相应父元素的对象附加到新的<li>元素？所以为了清楚起见，它看起来像这样：

<li>
object id:3 (parent)
<li>object id:5</li>(child)
</li>`

有什么线索吗？:)

Answer 1

您可以使用两个函数来执行此操作，一个用于创建嵌套树结构，另一个用于创建基于先前创建的树结构的嵌套 html 结构。

let data = [{id: 3, name: ''}, {id: 4, name: ''}, {id: 5, name: '', parent: 3}, {id: 6, name: '', parent: 5},   {id: 7, name: '', parent: 4}, {id: 8, name: '', parent: 8}];
const toTree = (data, pid = undefined) => {
return data.reduce((r, e) => {
if (pid == e.parent) {
const obj = { ...e }
const children = toTree(data, e.id);
if (children) obj.children = children
r.push(obj)
}
return r
}, [])
}
const toHtml = (data) => {
const ul = document.createElement('ul')
data.forEach(e => {
const li = document.createElement('li');
const text = document.createElement('span')
text.textContent = `object id: ${e.id}`;
li.appendChild(text)
const children = toHtml(e.children);
if (children) li.appendChild(children)
ul.appendChild(li)
})
return ul
}
const tree = toTree(data)
const html = toHtml(tree)
document.body.appendChild(html)