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

我得到了以下对象数组：

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>
  object id:3 (parent)
    <li>object id:5</li>(child)
</li>`

对象id:3（父对象）
对象id:5
（子对象）
`

---

有什么线索吗？：）

您可以使用两个函数来实现这一点，一个用于创建嵌套的树结构，另一个用于基于先前创建的树结构创建嵌套的html结构

let data=[{id:3，名称：'}，{id:4，名称：'}，{id:5，名称：'''，父：3}，{id:6，名称：'''，父：5}，{id:7，名称：''，父：4}，{id:8，名称：'''，父：8}；
常量树=（数据，pid=未定义）=>{
返回数据。减少（（r，e）=>{
如果（pid==e.parent）{
常量obj={…e}
const children=toTree（数据，e.id）；
if（children）obj.children=children
r、 推送（obj）
}
返回r
}, [])
}
常量toHtml=（数据）=>{
const ul=document.createElement（'ul'）
data.forEach（e=>{
const li=document.createElement（'li'）；
const text=document.createElement（'span'）
text.textContent=`对象id:${e.id}`；
李.儿童（文本）
const children=toHtml（e.children）；
如果（儿童）李。儿童（儿童）
ul.儿童（李）
})
返回ul
}
常数树=总树（数据）
常量html=toHtml（树）
document.body.appendChild（html）

这听起来像是分组，而不是排序。@Edit，收到问题了谢谢！是的，它确实很好用。最初，我计划对double for循环进行类似的操作，并创建一个单独的数组，对所有元素进行排序。您知道如何使用vue.js解决此问题吗？我不确定是否有办法在不同的模板/组件之间进行通信。我还没有使用vue.js，但您可能只是修改

到HTML

函数，并用vue替换普通的js方法来创建元素。