如何以编程方式将新子项添加到深度嵌套的对象中

Question

Consider the following object, which is composed by an unknown number of deeply nested children.

 const state = {
  id: 1,
  children: [
    {
      id: 3,
      children: [
        {
          id: 4,
          children: []
        }
      ]
    },
    {
      id: 2,
      children: []
    }
  ]
}

How can I programatically push a new object to the children array of a node knowing only its id and the array of id s of its parents? I thought using recursion but I couldn't find a solution that worked. I am also using immutability-helper, so I have tried using Array.reduce() to return an object that looked like this:

    const newState = {
      children: {
        [idxOfNodeToChange]: {
          children: {$push: newChildren}
        }
      }
    }

so I could pass it to update() but there I am even more stuck since I would still have to traverse through the accumulator every time to go as deep as needed, and I'm not sure how to do that. Any ideas?

Extra info: I'm using a D3 library for React called VX and this structure is required to build a tree component, so I'm stuck on how to add new nodes programatically.

Answer 1

Let's find the node with ID 3 in our state, searching one level deep. Take the children of the current node , and find the node with correct ID within those children:

id = 3
node3 = state.children.find(v => v == id)

In that node, find ID 4. Now we're searching in the children of node 3 :

id = 4 // ┌ act on node3!
node4 = node3.children.find(v => v == id)

Fitting that to Array.reduce() , the accumulator is the current node . It starts at the root node state , and then traverses the tree downwards: each time, we traverse the tree one level, using the next ID from a list of IDs. We need the recursion to start at the root of the tree, so the initial value is state , our root node.

If we take the above examples and reduce them:

[3, 4].reduce((acc, x) => acc.children.find(v => v === x), state)
// ids                    traverse one level               start at root node

Unrolling it, this is equivalent to:

(state.children.find(v => v === 3)).children.find(v => v === 4)

The general form becomes:

const recursiveTraversal = ids => 
  ids.reduce((acc, x) => acc.children.find(v => v === x), state)

Answer 2

Here you go. You can use this recursive function to search by id and append data to the found node's children array.

function appendChildToNode(node, nodeId, data) {
  // If the node is empty, just return it as is.
  if (!node) {
    return node;
  }

  let children;

  if (node.id === nodeId) {
    // If the node has the id we're searching for, 
    // append the data to its children.
    children = [...node.children, data];
  } else {
    // Otherwise, apply the function recursively to each of its children 
    children = node.children.map(childNode => appendChildToNode(childNode, nodeId, data));
  }  

  return { ...node, children };
}

It is immutable and you may use it like this:

const newState1 = appendChildToNode(state, 4, { id: 5, children: [] });
const newState2 = appendChildToNode(state, 2, { id: 5, children: [] });

See it working in the example snippet below.

 const state = { id: 1, children: [{ id: 3, children: [{ id: 4, children: [] }] }, { id: 2, children: [] } ] }; const newState1 = appendChildToNode(state, 4, { id: 5, children: [] }); const newState2 = appendChildToNode(state, 2, { id: 5, children: [] }); console.log(state); // Orginal state should not be mutated. console.log(newState1); console.log(newState2); function appendChildToNode(node, nodeId, data) { // If the node is empty, just return it as is. if (!node) { return node; } let children; if (node.id === nodeId) { // If the node has the id we're searching for, // append the data to its children. children = [...node.children, data]; } else { // Otherwise, apply the function recursively to each of its children children = node.children.map(childNode => appendChildToNode(childNode, nodeId, data)); } return { ...node, children }; }

---

Update: The above function uses ES6 spread syntax to append items. If you need to support older browsers w/o transpilation, you can use this updated version using Object.assign and Array#concat .

function appendChildToNode(node, nodeId, data) {
  if (!node) {
    return node;
  }

  var children;
  
  if (node.id === nodeId) {
    children = node.children.concat([data]);
  } else {
    children = node.children.map(childNode => appendChildToNode(childNode, nodeId, data));
  }
  
  return Object.assign({}, node, { children });
}