在 Javascript 中提取树对象相关数据

Question

我有一个 Javascript 对象如下：

MainData: Object
 ->SubData: Array[23]
   ->0:Object
       Name : "ABC"
       ID: 1
       ->DataToDisplay :Array[2]
         ->0:Object
           Guid :"18189-90"
           Geo : "USA"
         ->1 : object
           Guid : "234-8089"
           Geo :"UK"
         OtherIrrelevantData : SomeData
         ->Children:Array[20]
           ->0:Object
              Name:"DEF"
              ID:2
              ->DataToDisplay : Array[1]
                ->0:object
                Guid :"18167-90"
                Geo : "Nor"
              ->Children : Array[5]
                ->0:Object 
                   Name : "GHI"
                   ID : 3 
                   ->DataToDisplay :Array[2]
                    ->0:Object
                      Guid :"18189-90"
                      Geo : "Ger"
                    ->1 : object
                      Guid : "234-8089"
                      Geo :"Pol"
                    otherirrelevantData : SomeData

我的目标是在 html 页面中递归地只显示数组 "DataToDisplay"。例如：如果控件匹配 Name:"ABC"，我应该能够显示 ,5 Geo 命名根 "ABC"[ 下的所有内容=22=]。我需要一个名称为 "ABC" 和 "DataToDisplay" 的对象，还有 "DEF" 和 "GHI"。

如果数据匹配名称 "GHI"，我需要一个名称为 "GHI" 的对象和它下面的 DataToDisplay。

我正在尝试为其使用 forach 循环，但在添加节点时失败了。从以上信息中提取数据有什么建议吗？

Answer 1

tree-node-utils can provide what your need. See the 'findNodes' function in this demo: https://linsight.github.io/tree-node-utils/demo/dist/

这里是findNodes在ES6中的实现：

findNodes(nodes, predicate) {
  let found = [];
  const self = this;
  for (const node of nodes) {
    if (predicate(node)) {
      found = [...found, node];
    }

    if (self.hasChildren(node)) {
      const foundChildren = self.findNodes(node.children, predicate);
      found = [...found, ...foundChildren];
    }
   }

   return found;
  };

它的作用是：

遍历所有根节点；
对于它们中的每一个，使用回调函数测试根节点predicate
如果回调函数通过则添加到结果数组
如果节点有子数据，递归地对所有子节点做同样的事情
return结果。

在你的例子中，你的 predicate 函数是这样的：

function canDisplay(node){ return node.Name === 'ABC'; }

在 Javascript 中提取树对象相关数据

Extracting tree object relevant data in Javascript

javascript

jquery

jquery-ui

javascript-objects

dom-events