Using `map` to Create New Array of Objects with Fewer Properties

Question

I am wanting to use map to create a new array of of objects that have two properties from the original objects in the originating array, so I am trying this:

const filteredConfigurableModules = configurableModules.map(module =>
  module.name, module.configurables
);

But this isn't working, as only the "name" is saved to the new array. What am I missing here?

I also tried this:

const filteredConfigurableModules = configurableModules.map(module => {
  name: module.name,
  configurables: module.configurables
});

... but end up with a syntax error:

SyntaxError: Unexpected token ':'

configurableModules.map(module =>({ name: module.name, configurables: module.configurables })); — Andrey
– Andrey, Commented Dec 17, 2019 at 15:20
If you want to return an object, enclose it in {}. Try configurableModules.map(module =>({ module.name, module.configurables })). — random
– random, Commented Dec 17, 2019 at 15:21
const mapped = [{id: 1, data: 'thing'}, {id: 2, data: 'thing'}].map(item => ({ id: item.id * 10, data: item.thing + ' another thing' })). This works. just tried it, which means the syntax Andrey provided is valid — Matt Pengelly
– Matt Pengelly, Commented Dec 17, 2019 at 15:30
See Siddharth's answer below: the key was the extra parentheses around the object. — Rey
– Rey, Commented Dec 17, 2019 at 15:31

Siddharth Pal · Accepted Answer · 2019-12-17 15:34:23Z

5

As I see you want to map from one array to another. You can do it in 2 ways:

Inline

  const filteredConfigurableModules = configurableModules.map(module => ({name: module.name, configurables: module.configurables}));

When you do inline and return an object you have to wrap it in parenthesis so that it gets evaluated properly.

Use Return Statement

const filteredConfigurableModules = configurableModules.map(module => {
  return {
    name: module.name,
    configurables: module.configurables
  };
});

edited Dec 17, 2019 at 15:34

answered Dec 17, 2019 at 15:23

Siddharth Pal

1,45811 silver badges24 bronze badges

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

3 Comments

Ele Over a year ago

Can you explain a little?

Rey Over a year ago

This worked. Thanks. Key was the extra parentheses around the object.

Matt Pengelly Over a year ago

this is because the shorthand fat arrow and returning an object dont go well together. runtime cant tell if youre trying to use a function block or an object.

Ele · Accepted Answer · 2019-12-17 16:12:55Z

1

You should wrap it with parentheses as follow:

const filteredConfigurableModules = configurableModules.map(({name, configurables})=> ({
  name,
  configurables
}));

edited Dec 17, 2019 at 16:12

answered Dec 17, 2019 at 15:30

Ele

33.8k7 gold badges43 silver badges80 bronze badges

Comments

Ovidiu Badita · Accepted Answer · 2019-12-17 15:28:40Z

0

You can create a new object on the arrow function from the map:

const filteredConfigurableModules = configurableModules.map(module =>
  ({ name: module.name, configurables: module.configurables })
);

this return an array of objects with name and module fields.

If you return an object, you need to use parenthesis because otherwise it will be treated as a code body with no return.

edited Dec 17, 2019 at 15:28

Ovidiu Badita

14310 bronze badges

answered Dec 17, 2019 at 15:22

Luis Louis

6948 silver badges23 bronze badges

2 Comments

Matt Pengelly Over a year ago

this is because the shorthand fat arrow and returning an object dont go well together. runtime cant tell if youre trying to use a function block or an object.

Roberto Zvjerković Over a year ago

Just wrap the object in parentheses.

Ekin Alcar · Accepted Answer · 2019-12-17 15:47:39Z

0

Can you try this if i understand your question correctly

const filteredConfigurableModules = configurableModules.map(module => ({
  name : module.name,
  configurables : module.configurables,
}));

edited Dec 17, 2019 at 15:47

answered Dec 17, 2019 at 15:23

Ekin Alcar

1353 silver badges7 bronze badges

Collectives™ on Stack Overflow

Using `map` to Create New Array of Objects with Fewer Properties

4 Answers 4

3 Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related