从 javascript 中嵌套的 object 中的 id 列表中获取所有父母的 id

Question

所以我有一个包含所有嵌套子属性的对象数组。 它在前端是 treeview，它应该为列表中的每个 id 扩展节点直到选定的节点。 为了能够做到这一点，我必须从列表中获取每个选定 ID 的所有父 ID。

例如，我的checkedKeys id 列表：

[16787217, 16787245, 16787266, 16787270, 16787272, 16787265, 16787264]

所有选中的项目都代表列表 object 中的 ID：

我的 object列表如下所示：

[
  {
    "id": 11,
    "name": "Forecast source",
    "value": null,
    "children": []
  },
  {
    "id": 2,
    "name": "Item Type",
    "value": null,
    "children": []
  },
  {
    "id": 16787217,
    "name": "Item@Cust",
    "value": null,
    "children": [
      {
        "id": 16787230,
        "name": "Customer",
        "value": null,
        "children": [
          {
            "id": 16787291,
            "name": "Commercial Network",
            "value": null,
            "children": []
          },
          {
            "id": 16787296,
            "name": "Distribution Site",
            "value": null,
            "children": []
          },
          {
            "id": 16787265,
            "name": "Site",
            "value": null,
            "children": []
          }
        ]
      },
      {
        "id": 16787254,
        "name": "Item",
        "value": null,
        "children": [
          {
            "id": 16787294,
            "name": "ABC (Regular)",
            "value": null,
            "children": []
          },
          {
            "id": 16787273,
            "name": "ABC (U)",
            "value": null,
            "children": []
          },
          {
            "id": 16787278,
            "name": "ABC (€)",
            "value": null,
            "children": []
          },
          {
            "id": 16787290,
            "name": "Class",
            "value": null,
            "children": []
          },
          {
            "id": 16787260,
            "name": "Family",
            "value": null,
            "children": [
              {
                "id": 16787264,
                "name": "Product line",
                "value": null,
                "children": []
              }
            ]
          },
          {
            "id": 16787263,
            "name": "Flavour",
            "value": null,
            "children": []
          },
          {
            "id": 16787262,
            "name": "Format",
            "value": null,
            "children": []
          },
          {
            "id": 16787261,
            "name": "Group 1",
            "value": null,
            "children": []
          },
          {
            "id": 16787292,
            "name": "ProdGroup",
            "value": null,
            "children": []
          },
          {
            "id": 16787293,
            "name": "Recipe",
            "value": null,
            "children": []
          },
          {
            "id": 16787288,
            "name": "Sale status",
            "value": null,
            "children": []
          }
        ]
      },
      {
        "id": 16787245,
        "name": "Item@Site",
        "value": null,
        "children": [
          {
            "id": 16787266,
            "name": "Family@Warehouse",
            "value": null,
            "children": []
          }
        ]
      }
    ]
  },
  {
    "id": 3,
    "name": "Lead Time",
    "value": null,
    "children": []
  },
  {
    "id": 5,
    "name": "Levels",
    "value": null,
    "children": []
  },
  {
    "id": 16787268,
    "name": "N1",
    "value": null,
    "children": [
      {
        "id": 16787269,
        "name": "N2",
        "value": null,
        "children": [
          {
            "id": 16787270,
            "name": "N3",
            "value": null,
            "children": [
              {
                "id": 16787271,
                "name": "N4",
                "value": null,
                "children": [
                  {
                    "id": 16787272,
                    "name": "N5",
                    "value": null,
                    "children": [
                      {
                        "id": 33564497,
                        "name": "N6",
                        "value": null,
                        "children": [
                          {
                            "id": 33564498,
                            "name": "N7",
                            "value": null,
                            "children": [
                              {
                                "id": 33564499,
                                "name": "N8",
                                "value": null,
                                "children": [
                                  {
                                    "id": 33564500,
                                    "name": "N9",
                                    "value": null,
                                    "children": []
                                  }
                                ]
                              }
                            ]
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  },
  {
    "id": 16787286,
    "name": "Op set",
    "value": null,
    "children": []
  }
]

所以我的问题是我无法弄清楚如何递归地获取所有父节点 ID 直到根级别并将它们推入expandedKeys数组。

我试图像这样实现 function：

this.list.forEach(el => {
  this.setExpandedNodes(el);
});

setExpandedNodes(node: PropertyNode) {
        if (node.children) {
            node.children.forEach(chld => {
                this.checkedKeys.forEach(key => {
                    if (chld.id === key) {
                        this.expandedKeys.push(node.id);
                    } else if (chld.children) {
                        chld.children.forEach(grChld => {
                            this.setExpandedNodes(grChld);
                        });
                    }
                });
            });
        }
    }

但我无法弄清楚如何从每个选定的 id 开始直到根级别获取所有父 id。 有人有想法吗？

Answer 1

感谢这个答案，我设法做到了。

getPath(model, id) {
    let path,
        item = model.id ;

    if (!model || typeof model !== 'object') {
        return;
    }

    if (model.id === id) {
        return [item];
    }

    (model.children || []).some(child => (path = this.getPath(child, id)));
    return path && [item, ...path];
}

setExpandedKeys() {
    if (this.checkedKeys && this.checkedKeys.length > 0) {
        this.checkedKeys.forEach(k => {
            this.list.forEach(
                mt => {
                    const result = this.getPath(mt, k);
                    if (result) {
                        this.expandedKeys.push(...result);
                    }
                }
            );
        });
    }
}

this.setExpandedKeys();

我现在拥有所有父母的身份，直到根。

Answer 2

返回父对象数组的 function 可能如下所示：

使用tree-model-js ：

    const getParentsById = (id, data) => {
var TreeModel = require('tree-model')
const tree = new TreeModel()
let path
for (let item of data) {
    const root = tree.parse(item)
    root.walk(function (node) {
        // Halt the traversal by returning false
        if (node.model.id === id) {
            path = node.getPath()
            return false;
        }
    });
}
path.pop()
return path.map(item => item.model)
}

不使用 tree-model-js：

    const getParentsById = (id, data) => {
const isFoundChild = (id, data, parents) => {
    if (data.find(item => item.id == id)) {
        return true;
    }
    else {
        for (let item of data) {
            if (item.children.length)
                if (isFoundChild(id, item.children)) {
                    parents.push(item);
                    return true;
                }
        }
        return false;
    }
}

const parents = [];
if (data.find(item => item.id == id))
    return [];
else {
    for (let item of data) {
        if (item.children.length)
            if (isFoundChild(id, item.children, parents)) {
                parents.push(item);
                return parents;
            }
    }
}
}

接下来，将 map() 应用于结果就足够了：

let parentsId = getParentsById(16787296, data).map(item => item.id)