如何从平面JavaScript数组创建分层HTML结构？

我被要求使用带有父ID的分层系统创建一个股票列表。我很难把孩子们展现在他们父母之下。我知道我需要使用某种递归函数，但我的大脑不允许我计算出它如何一起适应无限量的缩进

示例JavaScript数据

[
    {id: 1, parent_id: null, title: "Row 1"},
    {id: 2, parent_id: 1, title: "Row 2"},
    {id: 3, parent_id: 2, title: "Row 3"},
    {id: 4, parent_id: 2, title: "Row 4"}
]

HTML应该是什么样的

• 第1行
  • 第2排
    • 第3排
    • 第4排

---

如果有人能帮我的话，那就太棒了，因为我已经坚持了将近4个小时，找不到任何与我的具体目标相关的东西。

你使用的对象可以跟踪你的id。 例如：

var idObj={}；
var root=null；
//首先用元素填充对象
对于（变量i=0；i

这将为所有这些项添加一个

子项

属性

---

注意：此解决方案不是递归的，但您可以从

根变量开始递归遍历树。
您使用跟踪id的对象。
例如：

var idObj={}；
var root=null；
//首先用元素填充对象
对于（变量i=0；i

这将为所有这些项添加一个
子项
属性

注意：此解决方案不是递归的，但您可以从
根变量开始递归遍历树。
您使用跟踪id的对象。
例如：

var idObj={}；
var root=null；
//首先用元素填充对象
对于（变量i=0；i

这将为所有这些项添加一个
子项
属性

注意：此解决方案不是递归的，但您可以从
根变量开始递归遍历树。
您使用跟踪id的对象。
例如：

var idObj={}；
var root=null；
//首先用元素填充对象
对于（变量i=0；i

这将为所有这些项添加一个
子项
属性

注意：此解决方案不是递归的，但您可以从
根变量开始递归遍历树。
受Naomik启发，当
父id
不在正确位置时，代码将失败。添加了一个排序功能，可以将它们设置为正确的顺序


obj=[
{id:2，父\u id:1，标题：“第2行”}，
{id:3，父_id:2，标题：“第3行”}，
{id:4，父_id:2，标题：“第4行”}，
{id:1，父\u id:null，标题：“第1行”}
]
对象排序（函数（a，b）{
返回（a.parent\u id==null？0:a.parent\u id）-（b.parent\u id==null？0:b.parent\u id）；
});
var tree=document.getElementById（“树”）；
对于（变量i=0；i


受到Naomik的启发，当父id不在正确位置时，代码将失败。添加了一个排序功能，可以将它们设置为正确的顺序


obj=[
{id:2，父\u id:1，标题：“第2行”}，
{id:3，父_id:2，标题：“第3行”}，
{id:4，父_id:2，标题：“第4行”}，
{id:1，父\u id:null，标题：“第1行”}
]
对象排序（函数（a，b）{
返回（a.parent\u id==null？0:a.parent\u id）-（b.parent\u id==null？0:b.parent\u id）；
});
var tree=document.getElementById（“树”）；
对于（变量i=0；ivar arr = [
  {id: 1, parent_id: null, title: "Row 1"},
  {id: 2, parent_id: 1, title: "Row 2"},
  {id: 3, parent_id: 2, title: "Row 3"},
  {id: 4, parent_id: 2, title: "Row 4"}
];

var x = arr.reduce(function(map, node) {
  map.i[node.id] = node;
  node.children = [];
  node.parent_id === null ?
    map.result.push(node) :
    map.i[node.parent_id].children.push(node);
  return map;
}, {i:{}, result:[]}).result;

// all root nodes
// see output below
console.log(JSON.stringify(x, null, "  "));

// first "root" node
console.log(x[0].id); //=> 1

// first child of first root node
console.log(x[0].children[0].id); //=> 2

// first child of first child of first root node
console.log(x[0].children[0].children[0].id); //=> 3

// second child of first child of first root node
console.log(x[0].children[0].children[1].id); //=> 4

[
  {
    "id": 1,
    "parent_id": null,
    "title": "Row 1",
    "children": [
      {
        "id": 2,
        "parent_id": 1,
        "title": "Row 2",
        "children": [
          {
            "id": 3,
            "parent_id": 2,
            "title": "Row 3",
            "children": []
          },
          {
            "id": 4,
            "parent_id": 2,
            "title": "Row 4",
            "children": []
          }
        ]
      }
    ]
  }
]

// this works on arbitrarily sorted data
var x = arr.reduce(function(map, node) {
  map.i[node.id] = node;
  node.children = [];
  if (node.parent_id === null) {
    map.result.push(node);
  }
  else if (node.parent_id in map.i) {
    map.i[node.parent_id].children.push(node);
  }
  else {
    (node.parent_id in map.cache) ?
      map.cache[node.parent_id].push(node) :
      map.cache[node.parent_id] = [node];
  }
  if (node.id in map.cache) {
    node.children = node.children.concat(map.cache[node.id]);
    delete map.cache[node.id];
  }
  return map;
}, {i:{}, cache:{}, result:[]}).result;