使用子-父依賴項對數組進行排序

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}];

如何創建一個嵌套列表，其中將具有相應父元素的 object 附加到新的<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)