flatten an array of objects in javascript

Question

I have a data structure that looks like this

const array = [{
    name: 'bar',
  children: [{
    name: 'foo',
    children: [{
        name: 'baz123',
    }, {
        name: 'baz',
    }]
  }]
}, {
    name: 'shallowKey'
}, {
    name: 'abc'
}];

And I would like to flatten it to look something like this

[{
    name: 'bar'
}, {
    name: 'foo',
}, {
    name: 'baz123',
}, {
    name: 'baz',
}, {
    name: 'shallowKey'
}, {
    name: 'abc'
}];

I tried lodash like this https://jsfiddle.net/hmzhjji/081q60qg/1/ But it's not doing anything, any other way I can do this?

Thanks

I'm currently trying to come up with something in the same fiddle, sorry — aspiring_dev
– aspiring_dev, Commented Jan 30, 2018 at 15:40
I assume any object here can have children that can also have children that can also have children and so on? — Cory Danielson
– Cory Danielson, Commented Jan 30, 2018 at 15:49

Jonas Wilms · Accepted Answer · 2018-01-30 15:57:28Z

4

A recursive way would be:

 function flatten(array, result = []){
   for(const {name, children} of array){
     result.push({name});
     if(children) flatten(children, result);
   }
  return result;
}

Or the alternative ES6 version:

 const flatten = array => array.reduce((res, {name, children = []}) => res.concat(name).concat(flatten(children)), []);

So you can do flatten(array) to get the desired result.

edited Jan 30, 2018 at 15:57

answered Jan 30, 2018 at 15:38

Jonas Wilms

139k20 gold badges164 silver badges164 bronze badges

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

8 Comments

Jonas Wilms Over a year ago

@federico do you think that an explanation will help here?

this iterates over the array, destructures each element and pushes its name into the result, the  proceed with its children

<- thats exactly what the code tells you

Jonas Wilms Over a year ago

@darshan why should i??

Federico klez Culloca Over a year ago

@JonasW. you know what? You're right and I'm sorry. But it's too late for me to retract the downvote (unless you edit your post).

Federico klez Culloca Over a year ago

@JonasW. personally because a lot of questions are karmawhoring instead of trying to be helpful to the OP. This was not the case, but the prevalence of certain answers made me trigger happy. I don't know what other people think.

aspiring_dev Over a year ago

I'm sorry, but am I missing something? the code is not really that complex to require documentation. It can be such a pain to explain some simple code especially if you're just helping someone out

|

Kodanda Rama Durgarao poluri · Accepted Answer · 2018-01-30 15:55:00Z

0

You can use forEach to iterate over the array and check if the required object is present and call the function recursively

const array = [{
    name: 'bar',
  children: [{
    name: 'foo',
    children: [{
        name: 'baz123',
    }, {
        name: 'baz',
    }]
  }]
}, {
    name: 'shallowKey'
}, {
    name: 'abc'
}];


var res = [];
function flatten(array){
   array.forEach(function(obj){
       var name = {name: obj.name}
       res.push(name);
       if(obj.children){
          flatten(obj.children)
        }
    })
    return res;
 }


 console.log(flatten(array))

answered Jan 30, 2018 at 15:55

Kodanda Rama Durgarao poluri

5541 gold badge5 silver badges16 bronze badges

Collectives™ on Stack Overflow

flatten an array of objects in javascript

2 Answers 2

8 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related