如何有效过滤保留其现有结构的树视图? [英] How to effectively filter tree view retaining its existing structure?

问题描述

我有一个树结构的 JSON，它应该被过滤并且结果应该保留树结构.

var tree = [{文本:父母 1"，节点: [{文字:孩子1"，类型:孩子"，节点: [{文字:孙子 1"类型:孙子"},{文字:孙子2"类型:孙子"}]},{文字:孩子2"，类型:孩子"}]},{文本:父母 2"，类型:父母"},{文字:父母 3"，类型:父母"}];

示例:

1)如果搜索查询是父 1

预期结果:

<预><代码>[{文本:父母 1"，节点: [{文字:孩子1"，类型:孩子"，节点: [{文字:孙子 1"类型:孙子"},{文字:孙子2"类型:孙子"}]},{文字:孩子2"，类型:孩子"}]}]

2)如果搜索查询是 Child 1

预期结果:

<预><代码>[{文本:父母 1"，节点: [{文字:孩子1"，类型:孩子"，节点: [{文字:孙子 1"类型:孙子"},{文字:孙子2"类型:孙子"}]}]}]

3)如果搜索查询是 Grandchild 2

预期结果:

<预><代码>[{文本:父母 1"，节点: [{文字:孩子1"，类型:孩子"，节点: [{文字:孙子2"类型:孙子"}]}]}]

我需要保留基于节点级别的树结构(此处类型).到目前为止，我已经尝试过递归过滤，但无法重新映射结果.

angular.module("myApp",[]).filter("filterTree",function(){返回函数(项目，id){var 过滤 = [];var recursiveFilter = function(items,id){angular.forEach(items,function(item){if(item.text.toLowerCase().indexOf(id)!=-1){过滤.推(项目)；}if(angular.isArray(item.items) && item.items.length > 0){recursiveFilter(item.items,id);}});};递归过滤器(项目，ID)；返回过滤；};});});

我的 JSON 非常大，因此基于类型的重新映射预计将在过滤器本身中完成.请指教.

解决方案

您可以使用嵌套递归方法并过滤树，同时尊重找到的项目.

此解决方案不会改变原始数据.

function filter(array, text) {const getNodes = (result, object) =>{如果(object.text === 文本){结果.推(对象)；返回结果；}如果(Array.isArray(object.nodes)){const 节点 = object.nodes.reduce(getNodes, []);if (nodes.length) result.push({ ...object, nodes });}返回结果；};返回 array.reduce(getNodes, []);}var tree = [{ text: "Parent 1", nodes: [{ text: "Child 1", type: "Child", nodes: [{ text: "Grandchild 1", type: "Grandchild" }, { text:"孙子2"，输入:"孙子" }] }, { 文本:"子2"，输入:"子" }] }, { 文本:"父2"，输入:"父" }，{ 文本:"父 3"，输入:父"}];console.log(filter(tree, 'Parent 1'));console.log(filter(tree, 'Child 1'));console.log(filter(tree, 'Grandchild 2'));

.as-console-wrapper { max-height: 100% !important;顶部:0；}

I am having a tree structured JSON which should be filtered and the result should retain the tree structure.

var tree = [
  {
    text: "Parent 1",
    nodes: [
      {
        text: "Child 1",
        type: "Child",
        nodes: [
          {
            text: "Grandchild 1"
            type: "Grandchild"
          },
          {
            text: "Grandchild 2"
            type: "Grandchild"
          }
        ]
      },
      {
        text: "Child 2",
        type: "Child"
      }
    ]
  },
  {
    text: "Parent 2",
    type: "Parent"
  },
  {
    text: "Parent 3",
    type: "Parent"
  }
];

Example :

1)If search query is Parent 1

Expected result :

[
  {
    text: "Parent 1",
    nodes: [
      {
        text: "Child 1",
        type: "Child",
        nodes: [
          {
            text: "Grandchild 1"
            type: "Grandchild"
          },
          {
            text: "Grandchild 2"
            type: "Grandchild"
          }
        ]
      },
      {
        text: "Child 2",
        type: "Child"
      }
    ]
  }
]

2)If search query is Child 1

Expected result :

[
  {
    text: "Parent 1",
    nodes: [
      {
        text: "Child 1",
        type: "Child",
        nodes: [
          {
            text: "Grandchild 1"
            type: "Grandchild"
          },
          {
            text: "Grandchild 2"
            type: "Grandchild"
          }
        ]
      }
    ]
  }
]

3)If search query is Grandchild 2

Expected result :

[
  {
    text: "Parent 1",
    nodes: [
      {
        text: "Child 1",
        type: "Child",
        nodes: [
          {
            text: "Grandchild 2"
            type: "Grandchild"
          }
        ]
      }
    ]
  }
]

I need to retain the tree structure based on the node level (type here). So far I have tried filtering recursively but couldn't re-map the results.

angular.module("myApp",[])
   .filter("filterTree",function(){
       return function(items,id){
          var filtered = [];
          var recursiveFilter = function(items,id){
              angular.forEach(items,function(item){
                 if(item.text.toLowerCase().indexOf(id)!=-1){
                    filtered.push(item);
                 }
                 if(angular.isArray(item.items) && item.items.length > 0){
                    recursiveFilter(item.items,id);              
                 }
              });
          };
          recursiveFilter(items,id);
          return filtered;
       }; 
    });
});

My JSON is pretty large and hence remapping based on types are expected to be done in the filter itself. Please advice.

解决方案

You could use a nested recursive approach and filter the tree, while respecting the found item.

This solution does not mutate the original data.

function filter(array, text) {
    const getNodes = (result, object) => {
        if (object.text === text) {
            result.push(object);
            return result;
        }
        if (Array.isArray(object.nodes)) {
            const nodes = object.nodes.reduce(getNodes, []);
            if (nodes.length) result.push({ ...object, nodes });
        }
        return result;
    };

    return array.reduce(getNodes, []);
}

var tree = [{ text: "Parent 1", nodes: [{ text: "Child 1", type: "Child", nodes: [{ text: "Grandchild 1", type: "Grandchild" }, { text: "Grandchild 2", type: "Grandchild" }] }, { text: "Child 2", type: "Child" }] }, { text: "Parent 2", type: "Parent" }, { text: "Parent 3", type: "Parent" }];

console.log(filter(tree, 'Parent 1'));
console.log(filter(tree, 'Child 1'));
console.log(filter(tree, 'Grandchild 2'));

.as-console-wrapper { max-height: 100% !important; top: 0; }

这篇关于如何有效过滤保留其现有结构的树视图?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！