javascript - 在 angular/js 中将节点添加到递归/嵌套的 json 中

Question

在给定父级 ID 的情况下，我正在努力将新项目添加到一些嵌套的 json 中......

jsons 看起来像这样

在 Angular 服务中，我有一个接收 ID 的方法(从单击对应于某个 ID 的按钮时开始)...我需要以某种方式遍历 json 并添加一个子项(目前只是一些假 child )

同样在 Angular 服务中我有一个名为

的变量

公共(public)currentlySelectedTree;

在传入 ID 的子列表中包含我需要添加子项的树

我到底该怎么做这个 SOS...我认为遍历并找到它并不难...但是我该如何添加一些东西并坚持下去？

非常感谢

      {
         "name":"We Ship Anything Inc - Prod",
         "description":"Production",
         "id":"1",
         "datecreated":"2010-10-10",
         "installid":"WeShipAnythingProd",
         "showchildren":"1",
         "children":[
            {
               "name":"UAT EU",
               "description":"User acceptance testing EU",
               "id":"2",
               "datecreated":"2018-7-05",
               "showchildren":"1",
               "children":[
                  {
                     "name":"Dev EU 1",
                     "id":"3",
                     "description":"Development environment for EU West 1",
                     "datecreated":"2018-7-10",
                     "showchildren":"1",
                     "children":[

                     ]
                  },
                  {
                     "name":"Dev EU 2",
                     "id":"11",
                     "description":"Development environment for EU West 2",
                     "datecreated":"2018-7-11",
                     "showchildren":"1",
                     "children":[

                     ]
                  },
                  {
                     "name":"Dev EU 3",
                     "id":"12",
                     "description":"Development environment for Mother Russia",
                     "datecreated":"2018-7-13",
                     "showchildren":"1",
                     "children":[

                     ]
                  }
               ]
            },
            {
               "name":"UAT US",
               "id":"4",
               "description":"User acceptance testing US",
               "datecreated":"2018-7-12",
               "showchildren":"1",
               "children":[
                  {
                     "name":"Dev US 1",
                     "description":"Development environment for US East",
                     "id":"5",
                     "datecreated":"2018-7-13",
                     "showchildren":"1",
                     "children":[

                     ]
                  },
                  {
                     "name":"Dev US 2",
                     "description":"Development environment for US West",
                     "id":"13",
                     "datecreated":"2018-7-13",
                     "showchildren":"1",
                     "children":[

                     ]
                  }
               ]
            }
         ]
      }
   

当前代码

addChild(id) {
    console.log('add child to ' + id);
    console.log(this.currentlySelectedTree[0][0]);
    this.traverse_it(this.currentlySelectedTree[0][0], id);

  }

  traverse_it(obj, id) {
    let index = 0;
    for (let prop in obj) {
        if (typeof obj[prop] === 'object') {
            console.log(prop);
            this.traverse_it(obj[prop], id);
            index = index + 1;
        } else {
            index = index + 1;
        }

    }
  }

Answer 1

如果我理解这个问题，您要做的是在给定对象 ID 的情况下获取对这些嵌套对象之一的子数组的引用。您可以通过非常干净的深度优先搜索来做到这一点，直到找到对象:

let tree = {"name":"We Ship Anything Inc - Prod","description":"Production","id":"1","datecreated":"2010-10-10","installid":"WeShipAnythingProd","showchildren":"1","children":[{"name":"UAT EU","description":"User acceptance testing EU","id":"2","datecreated":"2018-7-05","showchildren":"1","children":[{"name":"Dev EU 1","id":"3","description":"Development environment for EU West 1","datecreated":"2018-7-10","showchildren":"1","children":[]},{"name":"Dev EU 2","id":"11","description":"Development environment for EU West 2","datecreated":"2018-7-11","showchildren":"1","children":[]},{"name":"Dev EU 3","id":"12","description":"Development environment for Mother Russia","datecreated":"2018-7-13","showchildren":"1","children":[]}]},{"name":"UAT US","id":"4","description":"User acceptance testing US","datecreated":"2018-7-12","showchildren":"1","children":[{"name":"Dev US 1","description":"Development environment for US East","id":"5","datecreated":"2018-7-13","showchildren":"1","children":[]},{"name":"Dev US 2","description":"Development environment for US West","id":"13","datecreated":"2018-7-13","showchildren":"1","children":[]}]}]}

 function getChildrenOfID(tree, id){
    let stack = [tree]
    while(stack.length){
        let current = stack.pop()
        if (current.id == id) return current.children
        stack.push(...current.children)
    }
 }
 // get children of id 4
 let childArray = getChildrenOfID(tree, 4)
 console.log(childArray)
 
 // get empty child array of id 13 and push something
 childArray = getChildrenOfID(tree, 13)

 childArray.push({test: "some test object"})
 // tree should now have test object under in 13's children
 console.log(tree)

如果函数找不到id，它将返回undefined