代码之家 › 专栏 › 技术社区 › wenn32

基于层次结构的数据表示的数据结构

html5 javascript

0

wenn32 · 技术社区 · 6 年前

我有如上所述的(层次结构)数据。

我需要

显示此数据(UI)
搜索名称字段

显示此数据(UI) : 对于UI,我的计划是有一个按钮列表,当用户单击一个按钮时,它将进入下一个级别。例如,最初显示两个按钮“John Software”和“Bobbys automobile”。当用户点击“John软件”时,它会清除屏幕并显示“John软件”内的内容,即两个按钮“Hans automobile parts”和“xyz cloud solution”等。。

:

我现在有一个json数据,然后被解析并循环遍历对象以获得用户想要的(不包括搜索)。我认为使用现有的数据结构(如果有的话)来完成这项任务是明智的。

如果你需要我更多的信息,请告诉我。

1 回复 | 直到 6 年前

1

0

Jonas Wilms 6 年前

你基本上有三个选择是有意义的:

1) 一棵树:

 const root = {
   name: "Har's holdings",
   code: "0001",
   children: [
     {
       name: "John software company",
       code: "0220",
       children: [/*...*/],
    },
    /*...*/
  ],
 };

因此,当显示时,根据 node.children 如果单击其中一个,则将节点设置为 node = node.children[clicked] . 现在搜索时,将树展平是有意义的,这可以通过生成器轻松完成:

  function* flatten(node) {
    yield node;
    for(const child of node.children)
      yield* flatten(child);
 }

它允许您获取一个数组:

  const nodes = [.. flatten(root)];

2) 查找表:

您可以根据节点的代码存储节点,并将子节点的代码存储在每个节点中,以便您可以轻松获取它们:

  const byCode = {
    "0001": {
     name: "Har's holdings",
     code: "0001",
     children: ["0220", /*...*/],
   },

   "0220": {
     name: "John software company",
     code: "0220",
     children: [/*...*/]
  }
  //...
 };

获取一个节点的所有子节点可以执行以下操作:

  const childNodes = byCode["0001"].children.map(key => byCode[key]);

  const nodes = Object.values(byCode);

3) 阵列

  const nodes = [
    {
     name: "Har's holdings",
     code: "0001",
     children: ["0220", /*...*/],
    },
    {
     name: "John software company",
     code: "0220",
     children: [/*...*/]
   }
 ];

很容易搜索,但是要将其用作树,必须将其转换为2):

  const byCode = {};
  for(const node of nodes)
    byCode[node.code] = node;