Get single property array from an array of objects

Question

I have this array of objects and I want to get all the controls from this to another array:

this.formModel = {
    sections: [
        {
            title: 'Section 01',
            controls: [
                new FormControlInput({
                    key: 'name 01',
                    label: 'Name 01'
                }),
                new FormControlSelect({
                    key: 'abc',
                    label: 'Abc'
                })
            ]
        },
        {
            title: 'Section 02',
            controls: [
                new FormControlInput({
                    key: 'name 02',
                    label: 'Name 02'
                })
            ]
        }
    ]
};

I am using map for this but I am not getting single array, I am getting array of arrays:

this.formModel.sections.map(function (x) { return x.controls; })

Getting this:

[
     {
        [{
            key: 'name 01',
            label: 'Name 01'
        },
        {
            key: 'abc',
            label: 'Abc'
        }]
     },
     {
        [{
            key: 'name 02',
            label: 'Name 02'
        }]
     }
]

What I want is this:

[
    {
        key: 'name 01',
        label: 'Name 01'
    },
    {
        key: 'abc',
        label: 'Abc'
    },
    {
        key: 'name 02',
        label: 'Name 02'
    }       
]

Answer 1

You just need to flatten your array after mapping:

 var obj = { sections: [{ title: 'Section 01', controls: [ { key: 'name 01', label: 'Name 01' }, { key: 'abc', label: 'Abc' } ] }, { title: 'Section 02', controls: [ { key: 'name 02', label: 'Name 02' } ] } ] }; var mapped = obj.sections.map(function (x) { return x.controls; }); var flattened = [].concat.apply([], mapped); console.log(flattened); 

To simplify your example:

 // This is your structure: var sections= [{ controls: [{}, {}] // C1 }, { controls: [{}] // C2 } ]; // With the map, grabbing each `controls` property, and using that as an entry in your array: var mapped = sections.map(function (x) { return x.controls; }); console.log(mapped); // [[{},{}],[{}]] // ^ C1 ^ C2 // We need to remove that extra layer of arrays: var flattened = [].concat.apply([], mapped); console.log(flattened); 

Answer 2

You can use reduce to flatten the hierarchy

formModel.sections
  .map(x =>  x.controls)
  .reduce((prev, current) => prev.concat(current), [])

Answer 3

Use reduce instead of map :

 let formModel = { sections: [ { title: 'Section 01', controls: [ { key: 'name 01', label: 'Name 01' }, { key: 'abc', label: 'Abc' } ] }, { title: 'Section 02', controls: [ { key: 'name 02', label: 'Name 02' } ] } ] }; let result = formModel.sections.reduce((res, section) => { return res = res.concat(section.controls); }, []); console.log(result);