Home » vue » javascript tree add new property to objects at specific level

javascript tree add new property to objects at specific level

Posted by: admin November 26, 2021 Leave a comment

Questions:

I have array of objects as tree,I need to add new property named "dateType" to the 3rd level

   let tree = [
        {
          id: 1,
          name: "parent1",
          children: [
            {
              id: 2,
              name: "child1",
              children: [
                { id: 4, name: "subChild1" },
                { id: 5, name: "subChild2" }
              ]
            },
            { id: 3, name: "child2" }
          ]
        }
      ];

it should be like this:

let tree = [
    {
      id: 1,
      name: "parent1",
      children: [
        {
          id: 2,
          name: "child1",
          children: [
            { id: 4, name: "subChild1",dateType:"test" },
            { id: 5, name: "subChild2", dateType:"test" }
          ]
        },
        { id: 3, name: "child2" }
      ]
    }
  ];

how can I do that in easy way as my way it something like this:

 custTree(res) {
      let result = [];
      res.forEach(level1 => {
        level1.children.forEach(level2 => {
          level2.children.forEach(level3 => {
console.log(level3)//nothing here
            //code here
          });
        });
      });
      return result;
    },

Note:the tree is dynamic and it is from 3 levels ,but alwayes I need to update the last level

Answers:

You could take an iterative and recursive approach and check if the level is zero for update with a new property.

This approach takes an zero based level for updating the objects.

function update(array, level, object) {
    if (level) array.forEach(o => update(o.children || [], level - 1, object))
    else array.forEach(o => Object.assign(o, object));
}

let tree = [{ id: 1, name: "parent1", children: [{ id: 2, name: "child1", children: [{ id: 4, name: "subChild1" }, { id: 5, name: "subChild2" }] }, { id: 3, name: "child2" }] }];

update(tree, 2, { dateType: 'test' });

console.log(tree);
.as-console-wrapper { max-height: 100% !important; top: 0; }

###

If I understand correctly, you want to add the property at the deepest level in your tree, without knowing beforehand what the height of your tree is. So if the height of your tree is 5, you want to add the property to all nodes that are at level 5.

You could use a breadth-first traversal for this. That way you get all nodes at one particular level, each time going one level deeper. Stop when the next level turns out to be empty: it means we arrived at the deepest level.

This can be a utility function: it would return the nodes of the deepest level in an array. From there on it is easy to do with that node array whatever you want:

function getDeepestLevel(tree) {
    // Perform a breadth-first traversal
    let lastLevel = [];
    while (tree.length) {
        lastLevel = tree; // Keep track of the level that is not empty
        tree = tree.flatMap(node => node.children || []); // Next level
    }
    return lastLevel;
}

// Example tree
let tree = [{id: 1,name: "parent1",children: [{id: 2,name: "child1",children: [{ id: 4, name: "subChild1" },{ id: 5, name: "subChild2" }]},{ id: 3, name: "child2" }]}];

let level = getDeepestLevel(tree);
// Do what you want with those nodes:
for (node of level) node.dataType = "test";
console.log(tree);