Tree structure to flat array Javascript

Question

Follow up question to Flat array to tree Javascript

Looking for a solution of how to flatten a tree structure into an an array that can be used to insert into a sql db.

Some other solutions I've found use recursion, but I was hoping to find an explanation of how a recursive solution would work.

const tree = [
  {
    1: {
      label: 'root',
      children: [
        {
          2: {
            label: 'ant',
            children: [],
          },
        },
        {
          3: {
            label: 'bear',
            children: [
              {
                4: {
                  label: 'cat',
                  children: [],
                },
              },
              {
                5: {
                  label: 'dog',
                  children: [
                    {
                      6: {
                        label: 'elephant',
                        children: [],
                      },
                    },
                  ],
                },
              },
            ],
          },
        },
        {
          7: {
            label: 'frog',
            children: [],
          },
        },
      ],
    },
  },
];

const expectedFlattenedTree = [
  { id: 1, label: 'root', parent_id: null },
  { id: 2, label: 'ant', parent_id: 1 },
  { id: 3, label: 'bear', parent_id: 1 },
  { id: 4, label: 'cat', parent_id: 3 },
  { id: 5, label: 'dog', parent_id: 3 },
  { id: 6, label: 'elephant', parent_id: 5 },
  { id: 7, label: 'frog', parent_id: 1 },
];

Mister Jojo · Accepted Answer · 2021-07-15 03:03:51Z

1

this a simple recusive function

const tree = 
  [ { 1: { label: 'root', children: 
        [ { 2: { label: 'ant', children: [] } } 
        , { 3: { label: 'bear', children: 
              [ { 4: { label: 'cat', children: [] } } 
              , { 5: { label: 'dog', children: 
                    [ { 6: { label: 'elephant', children: [] } } 
                    ] 
          } } ] } } 
        , { 7: { label: 'frog', children: [ ] } } 
  ] } } ] 

const flatTree = []

function treeRun (xTree,parent_id)
  {
  xTree.forEach(el => 
    {
    let [k,v] = Object.entries(el)[0]
    flatTree.push({id:k, label:v.label, parent_id })
    if (v.children.length > 0)
      treeRun (v.children,k)
    })  
  }
treeRun (tree,null)

console.log( flatTree )

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

answered Jul 15, 2021 at 3:03

Mister Jojo

22.9k6 gold badges28 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

nay · Accepted Answer · 2021-07-15 03:42:43Z

if you use browser to debug the script step by step,that will more intuitive to understand recursive.
here I give a glimpse about recursive.

we will call flat function and loop at the top level
after construct current obj or node,this is still normal operation
we call flat in flat with children node,then we goes into sub level,at this time is like space jump magic.we go into another flat function with children,but the current flat function not finished yet.
after sub level flat (or sub level's sub level) finished,the top level flat continue run,and concat the created list

const tree=[{1:{label:"root",children:[{2:{label:"ant",children:[]}},{3:{label:"bear",children:[{4:{label:"cat",children:[]}},{5:{label:"dog",children:[{6:{label:"elephant",children:[]}}]}}]}},{7:{label:"frog",children:[]}}]}}];

function flat(items,parent_id){
  var flated = []
  for (var item of items){
    for (var id in item){
      const obj = item[id]
      //construct flat item and append to list
      flated.push({"id":id,"label":obj['label'],"parent_id":parent_id})
      
      if (obj['children'].length==0){
        continue
      }
      //use children list go into sub function
      const sub_flated = flat(obj['children'],id)
      
      //concat array list using ES6
      flated = [...flated,...sub_flated]
    }
  }
  return flated
}
console.log(flat(tree,null))

Collectives™ on Stack Overflow

Tree structure to flat array Javascript

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related