Flatten array of objects with nested children

Question

I've been trying to create a generic function which could flatten an array of objects but am failing at every turn. JS isn't my home language. Does anyone know of any existing function which could accept an array of nested objects and output a flattened one?

Input:

const arr = [
    {path:'/foo', component: SomeComponent, children: [
            {path:'/one', component: SomeComponent},
            {path:'/two', component: SomeComponent},
            {path:'/three', component: SomeComponent},
    ]},
    {path: '/bar', component: SomeComponent}
]

Expected output:

const flattened_arr = [
    {path:'/foo', component: SomeComponent},
    {path:'/foo/one', component: SomeComponent},
    {path:'/foo/two', component: SomeComponent},
    {path:'/foo/three', component: SomeComponent},
    {path:'/bar', component: SomeComponent},
]

Check out this: stackoverflow.com/q/44134212/4636715

vahdet
– vahdet

2019-11-18 06:18:56 +00:00
Commented Nov 18, 2019 at 6:18 — vahdet
– vahdet, Commented Nov 18, 2019 at 6:18

Dominik Schreiber · Accepted Answer · 2019-11-18 06:34:04Z

So there's Array.prototype.flat, but that doesn't deal with lists of Objects where one key (how should it know, which) should be flattened.

But you can always resort to Array.prototype.reduce to achieve that yourselves:

const SomeComponent = 'SomeComponent';
const arr = [
    {path:'/foo', component: SomeComponent, children: [
            {path:'/one', component: SomeComponent},
            {path:'/two', component: SomeComponent},
            {path:'/three', component: SomeComponent}
    ]},
    {path: '/bar', component: SomeComponent}
];

function myFlat(a, prefix = '') {  
  return a.reduce(function (flattened, {path, component, children}) {
    path = prefix + path;
    
    return flattened
      .concat([{path, component}])
      .concat(children ? myFlat(children, path) : []);
  }, []);
}

console.log(myFlat(arr));

You shouldn't use concat inside reduce because it creates a new array in memory every time you use it and copies all of the values from the array on which it is called. You should instead push() items onto the flattened array and return the flattened array on every iteration. Something like flattened.push({path, component}, ...myFlat(children, path))

Atishay Jain · Accepted Answer · 2019-11-18 06:41:08Z

2

For the example above, this should do.

const result = []
arr.map((obj) => {
  if (obj.children) {
    const el = {...obj, ...{}}
    delete el.children
    result.push(el) 
    Object.values(obj.children).map((v, i) => {
      result.push(v)
    })
  } else {
    result.push(obj)
  }
})

console.log(result)

answered Nov 18, 2019 at 6:41

Atishay Jain

1,44513 silver badges24 bronze badges

Comments

Abito Prakash · Accepted Answer · 2019-11-18 06:30:47Z

1

You can try this

flattenArr = arr => {
    const result = [];
    arr.forEach(item => {
        const {path, component, children} = item;
        result.push({path, component});
        if (children)
            result.push(...flattenArr(children));
    });
    return result;
}

answered Nov 18, 2019 at 6:30

Abito Prakash

4,8002 gold badges16 silver badges28 bronze badges

Comments

Aleksandar Hristov · Accepted Answer · 2022-08-04 18:02:36Z

I recently had to solve this problem to create a nested dropdown and here is my solution in case some one need to have the parents history tracked to do things like

and also be able to send back to the Back-End every ID that is necessary

I am sharing the pure flatten and flatten on steroids version to record the parents

P.P.S. the code can easily be reused to create "path" just concat the data you need instead of keeping it an array as I had to do.

const items = [
  { id: 1, title: 'one', children: [{ id: 3, title: 'one`s child', children: [] }] },
  { id: 2, title: 'two', children: [] },
  {
    id: 4,
    title: 'three',
    children: [
      {
        id: 5,
        title: 'three`s child',
        children: [
          {
            id: 6,
            title: 'three`s grandchild',
            children: [{ id: 7, title: 'three`s great-grandchild', children: [] }],
          },
        ],
      },
    ],
  },
]

/**
 * @param items - [{..., children: ...}]
 * @info children key is remove and parents is set instead
 * @returns flatten array and remember parents in array
 */
const deepFlattenRememberParents = (items) => {
  const flatten = JSON.parse(JSON.stringify(items)) // Important - create a deep copy of 'items' / preferably use lodash '_.cloneDeep(items)', but for the example this will do
  for (let i = 0; i < flatten.length; i++) {
    if (flatten[i].hasOwnProperty('children')) {
      flatten[i].children.map((child) => {
        if (flatten[i].hasOwnProperty('parents')) {
          child.parents = [...flatten[i].parents, flatten[i]]
        } else {
          child.parents = [flatten[i]]
        }
        return child
      })

      flatten.splice(i + 1, 0, ...flatten[i].children)
      delete flatten[i].children
    }

    if (!flatten[i].hasOwnProperty('parents')) {
      flatten[i].parents = []
    }
  }

  return flatten
}

/**
 * @param items - [{..., children: ...}]
 * @returns flatten array
 */
const deepFlatten = (items) => {
  const flatten = JSON.parse(JSON.stringify(items)) // Important - create a deep copy of 'items' / preferably use lodash '_.cloneDeep(items)', but for the example this will do
  for (let i = 0; i < flatten.length; i++) {
    if (flatten[i].hasOwnProperty('children')) {
      flatten.splice(i + 1, 0, ...flatten[i].children)
      delete flatten[i].children
    }
  }

  return flatten
}

console.log('deepFlattenRememberParents ', deepFlattenRememberParents(items))
console.log('deepFlatten ', deepFlatten(items))

Collectives™ on Stack Overflow

Flatten array of objects with nested children

4 Answers 4

1 Comment

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Linked

Related