[Vuejs]-Recursively looping over an array of objects using a for loop

by

0👍

✅

I figured out the problem I was having! I had to assign the value to a temp variable, then return it if it was not undefined.

  if (Array.isArray(tree)) {
    for (let item of tree) {
      let tmp = searchTreeForNode(item, nodeUuid);
      if (tmp !== undefined) {
        return tmp;
      }
    }
  }
👤NoahLE

1👍

I think you need something like this:

    currentNode.forEach( singleNode => {
      evalueateChildNodes(singleNode);
    });

 evaluateChildNodes(node) {

 // You can check the id here and assign it to some variable if necessary
 // Or if you found your specific node, you can push a new node to its children etc.
 // Note that even though the function name is 'evaluateChildNodes',
 // it will touch all root nodes due to the forEach() above.

    if (node.children) {
      evaluateChildNodes(node.children);
    }
  }

This code will recursively go through the whole tree and touch each node.

Alternatively, you can assign the above to a variable and just return the node whenever you found something suitable.

👤Enes Kirimi

1👍

You could use an array of indexes to represent a path to a node like:

[0, 1, 4]

Okay this is an over simplified implementation.

function getNode(tree, path) {
    let current = tree;

    // find node
    for (let i = 0; i < path.length; i++) {
        current = current.children[path[i]];
    }

    return current;
}

function addNode(tree, path, node) {
    const index = path.pop();
    // ^ careful, this mutates the original array
    // you can clone it if you wish
    // or use string paths like `0/1/4`
    // and use path.split('/') to get the indexes

    const parent = getNode(tree, path);

    parent.children[index] = node;
}

function deleteNode(tree, path) {
    const index = path.pop();
    const parent = getNode(tree, path);

    delete parent.children[index];
}

// you can get nodes like this
console.log(getNode(tree, [1]));

// and add nodes like this
addNode(tree, [0, 3], { name: 'test', value: 'test' });

// you can get the root node like this
console.log(getNode(tree, []));

I haven’t handled the case where a bad path is given, i.e. this assumes all the indexes in the path [0, 1, 4] refer to wrapper nodes except for the last index. But you get the idea.

👤aravindanve

1👍

I changed your code. this way it will work

https://jsfiddle.net/v2rkj376/1/

function searchTreeForNode(currentNode, nodeUuidToFind) {
  if (currentNode.uuid === nodeUuidToFind) {
    return currentNode.name || 'untitled ('+currentNode.uuid+')';
  }

  // If it's a wrapper node, parse the children
  if (currentNode.hasOwnProperty("type")) {
    for(node of currentNode.children){
      const foundNode = searchTreeForNode(node, nodeUuidToFind);
      if(foundNode)
        return foundNode;
    }
  }
}

a cleaner alternative is to just flatten the structure and then do a simple find.

const flattenTree = node => 
    node.children 
        ? [node, ...node.children.flatMap(flattenTree)] 
        : [node];

then finding becomes simply:

flattenTree(sampleTree).find(node=>node.uuid === 'item5');

https://jsfiddle.net/3dzbto8n/

👤Tiago Coelho

Leave a comment