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

问题描述 投票：0回答：3

我被要求使用具有父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个小时，我找不到任何与我的具体目标相关的东西。

javascript html hierarchy
3个回答
2
投票

抬头：这要求您的数据以父节点出现在子节点引用之前的方式进行排序。如果需要，可以先做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:[]}初始化reduce 我们将使用i对象作为引用父节点的方法，使用result数组来存储顶级根节点
  2. 使用id通过map.i[node.id] = node索引每个节点
  3. 如果节点是根节点（parent_id === null），请使用map.result.push(node)将其添加到结果中
  4. 如果节点是子节点（parent_id !== null），请使用map.index[node.parent_id].children.push(node)将其添加到父节点的children数组中

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

// 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;
0
投票

您使用一个跟踪您的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变量开始递归遍历树。

0
投票

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

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回答了为什么这里不需要基于对象模型的递归。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.