Question

我有一个树形结构的JSON应该被过滤，结果应该保留树结构。

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"
  }
];

示例：

1）如果搜索查询是父1

预期结果：

[
  {
    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）如果搜索查询是Child 1

预期结果：

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

3）如果搜索查询是Grandchild 2

预期结果：

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

我需要根据节点级别（类型这里）保留树结构。到目前为止，我已尝试递归过滤，但无法重新映射结果。

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;
       }; 
    });
});

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

Answer 1

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

＆＃13;

function filter(array, text) {
    return array.filter(function iter(o) {
        var temp;
        if (o.text === text) {
            return true;
        }
        if (!Array.isArray(o.nodes)) {
            return false;
        }
        temp = o.nodes.filter(iter);
        if (temp.length) {
            o.nodes = temp;
            return true;
        }
    });
}

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'));

＆＃13;

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

＆＃13;

此解决方案会改变原始数组。如果需要保留原始数组，可以为数组的副本插入stringify / parse部分。

return JSON.parse(JSON.stringify(array)).filter(function iter(o) {

如何有效过滤保留现有结构的树视图？

1 个答案: