adding node into recursive/nested jsons in angular/js

Question

I am struggling hard to add a new item into some nested json given the ID of the parent...

the jsons looks like this

in the angular service I have a method that takes in an ID (from when the button corresponding to a certain ID is clicked)... and I need to somehow traverse through the json and add a child (for right now just some dummy child)

also in the angular service I have the variarable called

public currentlySelectedTree;

which contains the tree that I need to add a child to, within the children list of the passed in ID

how in the hell would I do this SOS... I figure it isn't too hard to traverse through and find it... but how would I add something and persist it?

thank you very much

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

                     ]
                  }
               ]
            }
         ]
      }

current code

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;
        }

    }
  }

Can you give a sample of what you tried?

Shardul
– Shardul

2018-07-18 19:51:45 +00:00
Commented Jul 18, 2018 at 19:51 — Shardul
– Shardul, Commented Jul 18, 2018 at 19:51
check below my question please

csstudent903
– csstudent903

2018-07-18 20:04:29 +00:00
Commented Jul 18, 2018 at 20:04 — csstudent903
– csstudent903, Commented Jul 18, 2018 at 20:04

Mark · Accepted Answer · 2018-07-18 20:05:22Z

1

If I understand the problem, what you are trying to do is get a reference to the child array of one of these nested objects given the id of the object. You can do that with a pretty clean depth first search until you find the object:

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)

If the function can't find the id it will return undefined

answered Jul 18, 2018 at 20:05

Mark

92.6k8 gold badges116 silver badges156 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

csstudent903 Over a year ago

so this definitely finds it... but when you say reference do you mean actually reference or just a copy? because I need to somehow edit the children list and add a new one...

csstudent903 Over a year ago

wait I think it might be working correctly... how the hell is this a reference? Is it just how JS passes variables? I am new to js

Mark Over a year ago

This returns a reference to the actual array. So if you push something into the array it will be reflected in the tree.

Mark Over a year ago

current.children is a reference to the array. Arrays are passed by reference — you actually have to work to make an array copy.

csstudent903 Over a year ago

wow I thought I would have to work to get the reference. thank you so much for your solution. amazin

Collectives™ on Stack Overflow

adding node into recursive/nested jsons in angular/js

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related