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'
    }       
]

please add FormControlInput as well.

Nina Scholz
– Nina Scholz

2017-09-06 08:45:43 +00:00
Commented Sep 6, 2017 at 8:45 — Nina Scholz
– Nina Scholz, Commented Sep 6, 2017 at 8:45
What does FormControlInput return?

evolutionxbox
– evolutionxbox

2017-09-06 08:48:19 +00:00
Commented Sep 6, 2017 at 8:48 — evolutionxbox
– evolutionxbox, Commented Sep 6, 2017 at 8:48
Obviously, FormControlInput just return an object.

Cerbrus
– Cerbrus

2017-09-06 08:49:19 +00:00
Commented Sep 6, 2017 at 8:49 — Cerbrus
– Cerbrus, Commented Sep 6, 2017 at 8:49
Yes simple TypeScript class.

Ali Shahzad
– Ali Shahzad

2017-09-06 08:50:08 +00:00
Commented Sep 6, 2017 at 8:50 — Ali Shahzad
– Ali Shahzad, Commented Sep 6, 2017 at 8:50
@Cerbrus I commented when it wasn't clear.

evolutionxbox
– evolutionxbox

2017-09-06 08:50:15 +00:00
Commented Sep 6, 2017 at 8:50 — evolutionxbox
– evolutionxbox, Commented Sep 6, 2017 at 8:50

Cerbrus · Accepted Answer · 2017-09-06 08:54:55Z

2

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

edited Sep 6, 2017 at 8:54

answered Sep 6, 2017 at 8:48

Cerbrus

73.3k19 gold badges137 silver badges151 bronze badges

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

5 Comments

Ali Shahzad Over a year ago

But why this is happening?

Cerbrus Over a year ago

controls is an array of objects. I've added a simplified example. I hope this makes it a little easier to visualize what's happening.

jonahe Over a year ago

I think what's missing is an explanation of Array.prototype.apply, and how it takes arguments as an array. So in the end, the call becomes something similar to spreading the mapped array, like so: var flattened = Array.prototype.concat([], ...mapped).

Cerbrus Over a year ago

@jonahe: I'm pretty sure the "Why is this happening" is referring the the nested arrays.

jonahe Over a year ago

Ah, maybe.. But then wouldn't this question have been.. in the question, instead of in this comment? (And in no other comments to any other answers). Either way, ff .map is unclear to OP, then I guess [].concat.apply([], mapped) wouldn't be obvious either.

Titian Cernicova-Dragomir · Accepted Answer · 2017-09-06 08:49:08Z

1

You can use reduce to flatten the hierarchy

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

answered Sep 6, 2017 at 8:49

Titian Cernicova-Dragomir

253k37 gold badges464 silver badges394 bronze badges

Comments

Ivan Minakov · Accepted Answer · 2017-09-06 08:51:37Z

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

Collectives™ on Stack Overflow

Get single property array from an array of objects

3 Answers 3

5 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Related