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

注意：这要求数据按父节点在子节点引用之前显示的方式排序。如果需要，可以先进行sort。

编辑：下面发布了无排序的解决方案

这里有一种方法可以使用Array.prototype.reduce来做到这一点。

var 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;

解释。我将逐步完成我使用的归约过程

1. 使用{i:{}, result:[]}初始化化简

   我们将使用 i 对象作为引用父节点的方法，并使用 result 数组来存储顶级根节点

2. 使用 map.i[node.id] = node 通过id为每个节点编制索引

3. 如果节点是根节点 （ parent_id === null ），则将其添加到结果中，并带有map.result.push(node)

4. 如果节点是子节点 （ parent_id !== null ），则使用 map.index[node.parent_id].children.push(node) 将其添加到父节点的子数组中

好的，让我们检查一下它是否有效

// 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": []
          }
        ]
      }
    ]
  }
]

如果您的初始数据未排序...

在这种情况下，reduce方法有点困难。诚然，这个解决方案几乎失去了所有的优雅，但我提供了它来表明它仍然是可能的。

// 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;

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

obj = [
    {id: 2, parent_id: 1, title: "Row 2"},
    {id: 3, parent_id: 2, title: "Row 3"},
    {id: 4, parent_id: 2, title: "Row 4"},
    {id: 1, parent_id: null, title: "Row 1"}
]
obj.sort(function(a, b){
    return (a.parent_id == null ? 0 : a.parent_id) - (b.parent_id == null ? 0 : b.parent_id);
});
var tree = document.getElementById("tree");
for (var i = 0; i < obj.length; ++i)
  {
    if (obj[i].parent_id == null)
      {
        createTreeElement("li", obj[i].id, obj[i].title, tree);
      }
    else
      {
         var treeChildNode = document.getElementById("t" + obj[i].parent_id).getElementsByTagName("ul");
        if (treeChildNode.length)
          {
            createTreeElement("li", obj[i].id, obj[i].title, treeChildNode[0]);
          }
        else
          {
            createTreeElement("ul", obj[i].parentId, "", document.getElementById("t" + obj[i].parent_id));
            createTreeElement("li", obj[i].id, obj[i].title, document.getElementById("t" + obj[i].parent_id).getElementsByTagName("ul")[0]);
          }
      }
  }
function createTreeElement(name, id, text, parent)
{
  var node = document.createElement(name);
  node.id = "t" + id;
  node.innerHTML = text;
  parent.appendChild(node);
}

<ul id="tree">
  
</ul>

这段代码只是HTML中的概念证明，@Daniel Weiners根据对象模型回答为什么这里不需要递归。

您使用跟踪 id 的对象。例如：

var idObj = {};
var root = null;
// first populate the object with elements
for (var i = 0; i < arr.length; i++) {
  var item = arr[i];
  idObj[item.id] = item;
}
// then attach the children to the parents
for (var i = 0; i < arr.length; i++) {
  var item = arr[i];
  var parent = idObj[item.parent_id];
  if (parent) {
    parent.children = parent.children || [];
    parent.children.push(item);
  } else if (item.parent_id === null) { 
    //set the item as root if it has no parents
    root = item;
  }
}

这将向所有这些项添加一个 children 属性。

注意：此解决方案不是递归的，但您可以从root变量开始递归遍历树。