How do you iterate through a nested array of objects and update an object in JavaScript?

Question

I want to iterate through the nested objects and add a child to a specific object (Maria Jhonson with id = 201). Update my state and display it on the screen.

root = [{
   id: 105,
   name: "Jhon Doe",
   children: [{
      id: 106,
      name: "Alicia Thomber",
      children: [{
         id: 101,
         name: "Sven Mortensen",
         children: []
      }]
  },
  {
   id: 110,
   name: "Alan Steiner",
   children: [{
      id: 107,
      name: "Jack Wills",
      children: [{
         id: 101,
         name: "David Wilson",
         children: [{
             id: 115,
             name: "Amy Alberts",
             children: [{
                 id: 201,
                 name: "Maria Jhonson",
                 children: []
             }]
         }]
       }]
    }]
  }]
}]

You would have to do a nested search using either an iterative approach or a recursive approach — Sinan Yaman, Aug 04 '22 at 09:54
Does this answer your question? [How to find a node in a tree with JavaScript](https://stackoverflow.com/questions/9133500/how-to-find-a-node-in-a-tree-with-javascript) — Sinan Yaman, Aug 04 '22 at 10:02
@SinanYaman that is something similar. However, instead of returning that object, I want to update (add a child to that object) my array. — Syed Obaidullah, Aug 04 '22 at 10:18
So what happens when you update the element and then return it? — Sinan Yaman, Aug 04 '22 at 10:33
@SinanYaman I really don't want to return the object. I want to add a child to that object of my array. Basically to update the array with adding a child. — Syed Obaidullah, Aug 04 '22 at 11:22
@SinanYaman https://stackoverflow.com/questions/9133500/how-to-find-a-node-in-a-tree-with-javascript what this is doing is it taking every child as a new array and calling the recursive function. Hence, the original array is forgotten. — Syed Obaidullah, Aug 04 '22 at 11:24
@SinanYaman I am having an issue that when I am trying to update my state in react when node's grand child is "Test" it's not updating. I am trying to debug it since hours. Unable to figure it out :( — Syed Obaidullah, Aug 05 '22 at 11:49

score 0 · Answer 1 · answered Aug 04 '22 at 10:18

I'm not sure that got you correctly. But you can try this func

function changeDataById(data, id, newData) {
    if (Array.isArray(data)) {
        data.forEach(item => {
            if (item?.id === id) {
                // Do your magic here
                return Object.assign(item, newData);
            } else if (item.children) {
                changeDataById(item.children, id, newData)
            }
        })
    }
}

Sinan Yaman · Accepted Answer · 2022-08-04T11:47:10.717

I already linked SO question on how to traverse a tree. Only thing is you don't return the element, but push to its children.

const root = [
     {
       id: 105,
       name: "Jhon Doe",
       children: [{
         id: 106,
         name: "Alicia Thomber",
         children: [{
           id: 101,
           name: "Sven Mortensen",
           children: []
      }]
    },
    {
      id: 110,
      name: "Alan Steiner",
      children: [{
        id: 107,
        name: "Jack Wills",
        children: [{
          id: 101,
          name: "David Wilson",
          children: [{
            id: 115,
            name: "Amy Alberts",
            children: [{
              id: 201,
              name: "Maria Jhonson",
              children: []
            }]
          }]
        }]
      }]
    }
  ]
}]

const _insertValue = (node, id, value) => {
  node.forEach(child => insertValue(child, id, value))
  return node
}

const insertValue = (node, id, value) => {
  const stack = []
  let i
  stack.push(node);

  while (stack.length > 0) {
    node = stack.pop();
    if (node.id === id) {
      node.children.push(value)
      return node;
    } else if (node.children?.length) {
      for (i = 0; i < node.children.length; i++) {
        stack.push(node.children[i]);
      }
    }
  }
  return null;
}

const res = _insertValue(root, 201, {
  id: "202",
  name: "test",
  children: []
})
console.log(res) //inserted id 202 as a child of 201

How do you iterate through a nested array of objects and update an object in JavaScript?

2 Answers2