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

时间:2018-07-18 19:48:56

标签: javascript json angular

鉴于父级的ID,我正在努力将新项目添加到嵌套的json中。

json看起来像这样

在角度服务中,我有一个方法来获取一个ID(从单击与某个ID对应的按钮时开始)...并且我需要以某种方式遍历json并添加一个子对象(目前,只是一些假孩子)

在角度服务中,我也将变量称为

public currentSelectedTree;

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

我该怎么办这个SOS ...我认为遍历并找到它并不难...但是我将如何添加并坚持呢?

非常感谢

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="info">
  <h2 class="tab">This is the first line.</h2>
  <h2 class="tab">This is the second line.</h2>
  <h2 class="tab">This is the third line (which is longer than the first and second line.)</h2>
  <h2 class="tab">This is the fourth line (which is longer than the first, second, and third line.)</h2>
</div>

当前代码

      {
         "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":[

                     ]
                  }
               ]
            }
         ]
      }
   

1 个答案:

答案 0 :(得分: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