【问题标题】:Convert an Array to Tree in Typescript在 Typescript 中将数组转换为树
【发布时间】:2018-10-17 04:36:12
【问题描述】:

我在这样存储的对象数组中有结构数据库:

 arry = [{"name": "a", "id": "2", "data":"foo", "parent": "1"},
 {"name": "b", "id": "3", "data":"foo", "parent": "2"},
 {"name": "c", "id": "4", "data":"foo", "parent": "3"},
 {"name": "d", "id": "5", "data":"foo", "parent": "3"},
 {"name": "e", "id": "6", "data":"foo", "parent": "4"},
 {"name": "f", "id": "7", "data":"foo", "parent": "5"}]

我想要这样的嵌套结构

{
"2":{
   "name": "a",
   "data": "foo",
  "3":{
     "name": "b",
     "data":"foo",
     "4":{
        "name": "c",
        "data":"foo",
        "6":{
           "name": "e",
           "data": "foo",
          };
       },
      "5":{
         "name": "d",
         "data": "foo",
         "7":{
            "name": "f",
            "data": "foo"
           }
        }
      }
    }
  };

所以我可以使用它 Angular Material 树。

【问题讨论】:

  • 这更像是一个编程问题,而不是一个角度问题。还有,你这个表的数据源是什么,能保证不会有循环吗?

标签: javascript typescript data-structures angular6


【解决方案1】:

为此,您可以将节点数组缩减为字典,使用每个节点的id 作为索引。

这样,您可以直接在字典中通过其 id 访问所有节点。因此,您将能够轻松地将每个节点存储在其父节点中。

一旦所有节点都存储在它们各自的父节点中,您只需从字典中获取根节点,它将保存您的所有树。

在解析子节点时,可能会出现父节点尚未在字典中的情况,在这种情况下,您可以使用一个虚拟对象,在我们解析实际父节点时将扮演一个占位符。

var arry = [
 {"name": "a", "id": "2", "data":"foo", "parent": "1"},
 {"name": "b", "id": "3", "data":"foo", "parent": "2"},
 {"name": "c", "id": "4", "data":"foo", "parent": "3"},
 {"name": "d", "id": "5", "data":"foo", "parent": "3"},
 {"name": "e", "id": "6", "data":"foo", "parent": "4"},
 {"name": "f", "id": "7", "data":"foo", "parent": "5"}
];

function totree(branches, node) {
  // if we don't have the parent yet
  if (!branches[node.parent]) {
    // create a dummy placeholder for now
    branches[node.parent] = {};
  }
  // store our node in its parent
  branches[node.parent][node.id] = node;
  // store our node in the full list
  // copy all added branches on possible placeholder
  branches[node.id] = Object.assign(node, branches[node.id]);

  return branches;
}

var tree = arry.reduce(totree, {})['1']; // get only the root node ('1')

console.log(tree);

【讨论】:

  • 虽然这个解决方案很优雅,但它不能解决树可以有多个根节点的一般情况。我们仍然需要遍历字典来创建最终结构。
  • @AsGoodAsItGets 虽然有些图没有根节点,但树总是只有一个。
  • @Kaiido 我假设您指的是树数据结构。我将树的一般用途称为分层 UI 元素,在这种情况下,您当然可以有多个根。我们不是在谈论图数据结构。
  • 为了回答最初的问题,一个完整且更加优雅的 ES6 解决方案是这个:stackoverflow.com/a/55241491/134120
  • @AsGoodAsItGets 嗯...请在此处重新阅读问题。是的,我们在这里谈论的是 Graph 数据结构。抱歉,在 GC 中造成大量混乱的递归方法并不是我所说的“优雅”解决方案,即使它写的字符更少(真的是顺便说一句吗?)。
猜你喜欢
  • 1970-01-01
  • 2020-10-29
  • 2017-09-10
  • 2015-12-09
  • 2016-08-18
  • 1970-01-01
  • 1970-01-01
  • 2022-09-27
  • 2015-06-17
相关资源
最近更新 更多