将树 javascript object 的所有子节点作为平面数组

Question

I have a tree-based javascript object.

let tree = {
   id: 1, children: [
    {id: 2},
    {id: 3},
    {
     id: 4, children: [
      {id: 5},
      {id: 6},
      {
       id: 7, children: [
        {id: 8},
        {id: 9},
        {id: 10,}
       ]
      }
     ]
    }
   ]
  }

So, im trying to get all of them as a flat array, like this:

let flattenedTree = [
  { id: 1, children: [ /*All of it children...*/ ] },
  { id: 2 },
  { id: 3 },
  { id: 4, children: [ /*All of it children...*/ ] },
  { id: 5 },
  { id: 6 },
  { id: 7, children: [ /*All of it children...*/ ] },
  { id: 8 },
  { id: 9 },
  { id: 10 }
]

What options do i have to get them all without doing some dirty spaguetti code? I tried using array.forEach() but it naturally requires doing another iteration inside it, and surely will require it again while doing in this way, Thanks for the help =)

Answer 1

Recursion is the best choice to work with trees. It allows you to do this without spaghetti code:

function treeToList(tree) {
   const result = [];
   
   result.push(tree);
   const children = tree.children || [];
   children.forEach(child => {
     const childResult = treeToList(child);
     result.push(...childResult)
   })

   return result;
}

treeToList(tree)

Read more about recursion here

Answer 2

Recursion should be used when such object. Writing every loop function will be a boring and time wasting option. Recursion will function itself to the end branch of the object.

// changed tree variable from object to array 
// because object or array with recursion has same data type
let tree = [
   id: 1, children: [
    {id: 2},
    {id: 3},
    {
     id: 4, children: [
      {id: 5},
      {id: 6},
      {
       id: 7, children: [
        {id: 8},
        {id: 9},
        {id: 10,}
       ]
      }
     ]
    }
   ]
  ]

function recursion(obj) {

  obj.forEach((value, idx) => {

  // this condition will check if the value is array to do recursion
  if (typeof subObj === 'array') {

  return recursion(value)

  } else {
     // if the value is not an array to do recursion,
     // it will do what you want to do with this function 
     //and then will be finished.
     // do what date would be handled by recursion
     // ex) value = 'new value'
     return
     }

    })

    return
  }

  recursion(tree)