How to create multiple objects from array's value in JavaScript?

Question

I have an array like this:

const data = [{
  color:"red",
  to:1,
  from:2,
  opacity:12
}]

I want something like this:

const converted = [{from:2}, {to:1}, {opacity:12}]

What I am trying is:

const mappedData = data.map(({from,to,opacity}) => ({from:from},{to:to},{opacity:opacity}))

but this is not working.

You can only return a single value from a function, so you would need to return an array ({from,to,opacity}) => [{from:from},{to:to},{opacity:opacity}]). To create a flat array from the result use flatMap() instead of map. — pilchard
– pilchard, Commented Aug 25, 2022 at 8:10

Naren Murali · Accepted Answer · 2022-08-25 08:13:38Z

1

So you can loop through the array and for each object we can get the keys of the objects in the array and use a map to transform them to our desired output, Then the output will return an array, but we can use flatMap which will flatten the arrays returned into a single array of objects!

Thanks pilchard for teaching about flatMap!

const data = [{
color:"red",
to:1,
from:2,
opacity:12

}]

const arr = data.flatMap(x => Object.keys(x).map(data => ({[data]: x[data]})))

console.log(arr);

edited Aug 25, 2022 at 8:13

answered Aug 25, 2022 at 8:11

Naren Murali

66.1k6 gold badges51 silver badges96 bronze badges

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

2 Comments

pilchard Over a year ago

just use flatMap. And don't just post code, take the time to explain what wasn't working about the OP's code.

Naren Murali Over a year ago

@pilchard Thanks flat map is awesome, first I post then I edit it

Collectives™ on Stack Overflow

How to create multiple objects from array's value in JavaScript?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related