在给定条件下修改 JavaScript 中的树结构数据？

Question

我有这样的树数据：

var tree = [
  {
    id:"11",
    text: "Parent 1",
    type:"Parent",
    nodeSelected:false,
    nodes: [
      {
        text: "Child 1",
        parentId: "11",
        id:"21",
        nodeSelected:false,
        type: "Child",
        nodes: [
          {
            id:"36",
            text: "Grandchild 1",
            parentId: "21",
            nodeSelected:false,
            nodes:[],
            type: "Grandchild"
          },
          {
            id:"38",
            text: "Grandchild 2",
            parentId: "21",
            nodes:[],
            nodeSelected:false,
            type: "Grandchild"
          }
        ]
      },
      {
        id:"43",
        text: "Child 2",
        nodeSelected:false,
        parentId:"11",
        type: "Child",
        nodes: [
            {
            id:"52",
            parentId:"43",
            text: "Grandchild 1 of child 2",
            nodeSelected:false,
            nodes:[],
            type: "Grandchild"
          }
        ]
      }
    ]
  },
  {
    id:"46",
    text: "Parent 2",
    nodeSelected:false,
    type: "Parent",
    nodes:[]
  },
  {
    id:"48",
    text: "Parent 3",
    nodeSelected:false,
    type: "Parent",
    node:  [
        {
            id:"70",
            text: "child 3",
            parentId: "48",
            type: "Child",
            nodeSelected:false,
            nodes:[]
        }
    ]
  }
];

所有的nodeSelected都是假的。

我有一组数组形式的 ID。

groupedIds=["11","21","43","52","48"];

我想根据groupId array在某些条件下执行nodeSelected属性 true 。

条件是这样的，如果一个 parentId 连同它的子 ID 一起被提及，那么 parent 的nodeSelected属性应该保持为 false 并且孩子的nodeSelected应该是 true（并且它的nodes nodeSelected也应该是'true'）。 否则整个父节点nodeSelected应该是 true（连同它的节点）。

所以结果会是这样的：

var resultArray = [
  {
    id:"11",
    text: "Parent 1",
    type:"Parent",
    nodeSelected:false,
    nodes: [
      {
        text: "Child 1",
        parentId: "11",
        id:"21",
        nodeSelected:true,
        type: "Child",
        nodes: [
          {
            id:"36",
            text: "Grandchild 1",
            parentId: "21",
            nodeSelected:true,  
            type: "Grandchild"
          },
          {
            id:"38",
            text: "Grandchild 2",
            parentId: "21",
            nodeSelected:true,
            type: "Grandchild"
          }
        ]
      },
      {
        id:"43",
        text: "Child 2",
        nodeSelected:false,
        parentId:"11",
        type: "Child",
        nodes: [
            {
            id:"52",
            parentId:"43",
            text: "Grandchild 1 of child 2",
            nodeSelected:true,
            type: "Grandchild"
          }
        ]
      }
    ]
  },
  {
    id:"46",
    text: "Parent 2",
    nodeSelected:false,
    type: "Parent"
  },
  {
    id:"48",
    text: "Parent 3",
    nodeSelected:true,
    type: "Parent",
    node:  [
        {
            id:"70",
            text: "child 3",
            parentId: "48",
            type: "Child",
            nodeSelected:true
        }
    ]
  }
];

（我的尝试）虽然不完整但我们可以做这样的事情

tree.forEach((Parent) => {
            if (groupedIds.includes(Parent.id)) {
                let isSomeChildSelected = Parent.nodes.some((loc) => groupedIds.includes(loc.id));
                if (isSomeChildSelected) {
                    Parent.nodes.forEach((child) => {
                        if (groupedIds.includes(child.id)) {
                            let isSomeGrandChildSelected = child.nodes.some((grandchild) => groupedIds.includes(grandchild.id));
                            if (isSomeGrandChildSelected) {
                                child.nodes.forEach((grandchild) => {
                                    if (groupedIds.includes(grandchild.id)) {
                                        grandchild.isSelected = true;
                                    }
                                })
                            } else {
                                child.isSelected = true;
                                child.nodes.forEach((grandchild) => {
                                    grandchild.isSelected = true;
                                })
                            }
                        }
                    })
                } else {
                    Parent.isSelected = true;
                    Parent.nodes.forEach((child) => {
                        child.isSelected = true;
                        child.nodes.forEach((grandchild) => {
                            grandchild.isSelected = true;
                        })
                    })
                }
            }
        })

上面尝试的方法在一定程度上解决了这个问题，但是有点复杂。

任何帮助将非常感激。 谢谢！

Answer 1

我不会为你做这件事（不是出于恶意，只是因为我不是 100% 确定我理解这个问题，）。 但我希望能给你一个正确的方向。

在遍历树时，90% 的时间你需要一种叫做递归的东西。 递归看起来像这样：

function walk(items){
  items.forEach(items => {
    if(item.hasChildrenOrSomething){
      // notice the function calls itself:
      walk(item.children);
    }

    // Do something with item
  });
}

walk(tree);

这里有一件重要的事情要注意，如果你在调用 function后执行一些逻辑，当前项的所有子项都将应用该逻辑。 所以，我们在这里 go - 在你的情况下，你想要这样的东西：

const walk = (branch) => {
  branch.forEach(node => {
    // Check if this object even has children:
    if(node.hasOwnProperty('nodes') && node.nodes.length){
      walk(node.nodes);
      // Do your node.nodes.every check here
    }
    // Now check if this is in the array
  });
}

walk(tree);

如果您以前使用过递归，对不起，整篇文章可能只是超级光顾，并且错过了您的问题的重点。 如果你还没有，那么我只能说我 a) 嫉妒你第一次体验到如此优雅的感觉 b) 为你不得不解开它们令人难以置信的本质而感到抱歉。

Answer 2

这给了我 output 我想要的东西（递归）：

 var tree = [ { id:"11", text: "Parent 1", type:"Parent", nodeSelected:false, nodes: [ { text: "Child 1", parentId: "11", id:"21", nodeSelected:false, type: "Child", nodes: [ { id:"36", text: "Grandchild 1", parentId: "21", nodeSelected:false, nodes:[], type: "Grandchild" }, { id:"38", text: "Grandchild 2", parentId: "21", nodes:[], nodeSelected:false, type: "Grandchild" } ] }, { id:"43", text: "Child 2", nodeSelected:false, parentId:"11", type: "Child", nodes: [ { id:"52", parentId:"43", text: "Grandchild 1 of child 2", nodeSelected:false, nodes:[], type: "Grandchild" } ] } ] }, { id:"46", text: "Parent 2", nodeSelected:false, type: "Parent", nodes:[] }, { id:"48", text: "Parent 3", nodeSelected:false, type: "Parent", nodes: [ { id:"70", text: "child 3", parentId: "48", type: "Child", nodeSelected:false, nodes:[] } ] } ]; groupedIds=["11","21","43","52","48"]; var selectAllNode=array=> array.forEach((value)=>{ value.nodeSelected=true; value.nodes? selectAllNode(value.nodes): [] }); var getFilteredData = array => array.forEach((ele)=>{ if(groupedIds.includes(ele.id)){ let isSomeSelected = ele.nodes.some((val)=>groupedIds.includes(val.id)); if(isSomeSelected){ getFilteredData(ele.nodes); } else { ele.nodeSelected=true; selectAllNode(ele.nodes); } } }); getFilteredData(tree); console.log(tree);