Map array of objects based on Id

Question

Noob javascript enthusiast here.

I'm trying to understand the various higher-order functions of javascript, and am particularly curious with the possibilities of .map() on an array of objects.

Suppose you have the following:

selectedId = ['u1', 'u2']
data = [
{id: 'u1', color: 'red', age: '24'},
{id: 'u2', color: 'blue', age: '18'},
{id: 'u3', color: 'yellow', age: '15'}
]

How would you go about creating a new array that only contains the object of u1 and u2? I.e:

selectedData = [
{id: 'u1', color: 'red', age: '24'},
{id: 'u2', color: 'blue', age: '18'},
]

from which array depends the order of the result? have you tried anything? what does not work? — Nina Scholz
– Nina Scholz, Commented Apr 18, 2020 at 15:25

kind user · Accepted Answer · 2020-04-18 14:56:15Z

3

You would have to Array#map over your selectedId array, then find corresponding object inside data array using Array#find.

const selectedId = ['u1', 'u2'];

const data = [
  {id: 'u1', color: 'red', age: '24'},
  {id: 'u2', color: 'blue', age: '18'},
  {id: 'u3', color: 'yellow', age: '15'}
];

const res = selectedId.map((id) => data.find((o) => o.id === id));

console.log(res);

answered Apr 18, 2020 at 14:56

kind user

42k8 gold badges69 silver badges78 bronze badges

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

Comments

Amit Agarwal · Accepted Answer · 2020-04-18 15:24:26Z

1

If I understand it correctly, You can use array filter like

data.filter(el => selectedId.includes(el.id));

would give

[
{id: 'u1', color: 'red', age: '24'},
{id: 'u2', color: 'blue', age: '18'}
]

Or alternatively

selectedId.map((id) => data.find((el) => el.id === id));

would give

[
{id: 'u1', color: 'red', age: '24'},
{id: 'u2', color: 'blue', age: '18'}
]

edited Apr 18, 2020 at 15:24

answered Apr 18, 2020 at 15:19

Amit Agarwal

711 silver badge6 bronze badges

Collectives™ on Stack Overflow

Map array of objects based on Id

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related