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 },
];

Answer 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 }

Answer 2

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))