将层次结构筛选为仅叶级节点

Question

我正在尝试过滤给定叶级节点列表的层次结构。为了解释有点苦，我附上了一张图片。

给定一个层次结构，并给出一个叶级节点列表，如图中左侧所示，过滤层次结构只显示叶级节点及其各自的路径返回根。

数据如下：

[{"NodeId":"1","id":"1","dimension":"Hierarchy Number","name":"root","children":[{"NodeId":"1.1","id":"1.1","dimension":"Hierarchy Number","name":"1.1","parent":"1","children":[{"NodeId":"1.1.1","id":"1.1.1","dimension":"Hierarchy Number","name":"1.1.1","parent":"1.1"},{"NodeId":"1.1.2","id":"1.1.2","dimension":"Hierarchy Number","name":"1.1.2","parent":"1.1"},{"NodeId":"1.1.3","id":"1.1.3","dimension":"Hierarchy Number","name":"1.1.3","parent":"1.1"}]},{"NodeId":"1.2","id":"1.2","dimension":"Hierarchy Number","name":"1.2","parent":"1","children":[{"NodeId":"1.2.1","id":"1.2.1","dimension":"Hierarchy Number","name":"1.2.1","parent":"1.2"},{"NodeId":"1.2.2","id":"1.2.2","dimension":"Hierarchy Number","name":"1.2.2","parent":"1.2","children":[{"NodeId":"1.2.2.1","id":"1.2.2.1","dimension":"Hierarchy Number","name":"1.2.2.1","parent":"1.2.2"},{"NodeId":"1.2.2.2","id":"1.2.2.2","dimension":"Hierarchy Number","name":"1.2.2.2","parent":"1.2.2"}]}]}]}]

每个子节点都有一个引用它的父节点（这个根节点除外）

Answer 1

您可以通过改变子属性来过滤数组。

如果您不需要改变数组，则需要在迭代时获取树的副本或构建新对象。

function filter(root, leafs) {
    return root.filter(function (node) {
        var temp;
        if (leafs.includes(node.NodeId)) {
            return true;
        }
        temp = filter(node.children || [], leafs);
        if (temp.length) {
            node.children = temp;
            return true;
        }
    });
}

var tree = [{ NodeId: "1", id: "1", dimension: "Hierarchy Number", name: "root", children: [{ NodeId: "1.1", id: "1.1", dimension: "Hierarchy Number", name: "1.1", parent: "1", children: [{ NodeId: "1.1.1", id: "1.1.1", dimension: "Hierarchy Number", name: "1.1.1", parent: "1.1" }, { NodeId: "1.1.2", id: "1.1.2", dimension: "Hierarchy Number", name: "1.1.2", parent: "1.1" }, { NodeId: "1.1.3", id: "1.1.3", dimension: "Hierarchy Number", name: "1.1.3", parent: "1.1" }] }, { NodeId: "1.2", id: "1.2", dimension: "Hierarchy Number", name: "1.2", parent: "1", children: [{ NodeId: "1.2.1", id: "1.2.1", dimension: "Hierarchy Number", name: "1.2.1", parent: "1.2" }, { NodeId: "1.2.2", id: "1.2.2", dimension: "Hierarchy Number", name: "1.2.2", parent: "1.2", children: [{ NodeId: "1.2.2.1", id: "1.2.2.1", dimension: "Hierarchy Number", name: "1.2.2.1", parent: "1.2.2" }, { NodeId: "1.2.2.2", id: "1.2.2.2", dimension: "Hierarchy Number", name: "1.2.2.2", parent: "1.2.2" }] }] }] }];

console.log(filter(tree, ['1.1.1', '1.1.2', '1.2.2.1', '1.2.2.2']));

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

不改变原始树。

function filter(root, leafs) {
    var result = [];
    root.forEach(function (node) {
        var children;
        if (leafs.includes(node.NodeId)) {
            result.push(node);
            return;
        }
        children = filter(node.children || [], leafs);
        if (children.length) {
            result.push(Object.assign({}, node, { children }));
        }
    });
    return result;
}

var tree = [{ NodeId: "1", id: "1", dimension: "Hierarchy Number", name: "root", children: [{ NodeId: "1.1", id: "1.1", dimension: "Hierarchy Number", name: "1.1", parent: "1", children: [{ NodeId: "1.1.1", id: "1.1.1", dimension: "Hierarchy Number", name: "1.1.1", parent: "1.1" }, { NodeId: "1.1.2", id: "1.1.2", dimension: "Hierarchy Number", name: "1.1.2", parent: "1.1" }, { NodeId: "1.1.3", id: "1.1.3", dimension: "Hierarchy Number", name: "1.1.3", parent: "1.1" }] }, { NodeId: "1.2", id: "1.2", dimension: "Hierarchy Number", name: "1.2", parent: "1", children: [{ NodeId: "1.2.1", id: "1.2.1", dimension: "Hierarchy Number", name: "1.2.1", parent: "1.2" }, { NodeId: "1.2.2", id: "1.2.2", dimension: "Hierarchy Number", name: "1.2.2", parent: "1.2", children: [{ NodeId: "1.2.2.1", id: "1.2.2.1", dimension: "Hierarchy Number", name: "1.2.2.1", parent: "1.2.2" }, { NodeId: "1.2.2.2", id: "1.2.2.2", dimension: "Hierarchy Number", name: "1.2.2.2", parent: "1.2.2" }] }] }] }];

console.log(filter(tree, ['1.1.1', '1.1.2', '1.2.2.1', '1.2.2.2']));

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