Javascript 角度应用中的树状结构显示数据

在我的应用程序中，我需要以树结构的格式显示数据

基本上，我需要根据列表中的父项id缩进项目，以便创建一个树结构，请参见下面给定的屏幕截图，其中我根据它们在树结构中的位置缩进项目

这是我收到的数据：

[
  {
    "id": 1,
    "title": "Item 1",
    "parent_id": null
  },
  {
    "id": 2,
    "title": "Item 2",
    "parent_id": 1
  },
  {
    "id": 3,
    "title": "Item 3",
    "parent_id": 2
  },
  {
    "id": 4,
    "title": "Item 4",
    "parent_id": null
  },
  {
    "id": 5,
    "title": "Item 5",
    "parent_id": null
  },
  {
    "id": 6,
    "title": "Item 6",
    "parent_id": 5
  },
  {
    "id": 7,
    "title": "Item 7",
    "parent_id": 6
  },
  {
    "id": 8,
    "title": "Item 8",
    "parent_id": 6
  }
]

我需要一些关于如何格式化这些数据的建议，这样就可以很容易地对其进行迭代并在前端显示它。目前，我正在考虑创建一个嵌套的对象数组，其中每个对象将容纳其子对象，如下所示

[
  {
    "id": 1,
    "title": "Item 1",
    "parent_id": null,
    "child": [{
        "id": 2,
        "title": "Item 2",
        "parent_id": 1,
        "child": [{
            "id": 3,
            "title": "Item 3",
            "parent_id": 2
        }]
    }]
  },
  {
    "id": 4,
    "title": "Item 4",
    "parent_id": null
  },
  {
    "id": 5,
    "title": "Item 5",
    "parent_id": null,
    "child": [{
        "id": 6,
        "title": "Item 6",
        "parent_id": 5,
        "child": [{
            "id": 7,
            "title": "Item 7",
            "parent_id": 6
        }, {
            "id": 8,
            "title": "Item 8",
            "parent_id": 6
        }]
    }]
  }
]

---

你们可以在树上垫垫子。这很简单，也很有用。您可以使用css根据自己的意愿定制设计。正式文件：

正确，您可以创建具有所需格式的嵌套数组是的，对象数组对您来说就足够了，对于此结构，请使用“角度层次树状视图组件”您想要创建层次结构的解决方案吗？