Combining 2 arrays of objects into 1 array of objects (refactoring request)

Question

Looking for more optimized way to do it.

Resource arrays:

const users = [
    { id: 1, name: 'Vasya', postIds: [11, 22] },
    { id: 2, name: 'Petya', postIds: [33] },
    { id: 3, name: 'Roma', postIds: [44] },
];

const posts = [
    { id: 11, title: 'How to eat' },
    { id: 22, title: 'How to drink' },
    { id: 33, title: 'How to breath' },
    { id: 44, title: 'How to swim' },
];

Expected result

   const expectedResult = [
      {
        id: 1,
        name: 'Vasya',
        posts: [
          { id: 11, title: 'How to  eat' },
          { id: 22, title: 'How to drink' },
        ]
      },
      {
        id: 2,
        name: 'Petya',
        posts: [{ id: 33, title: 'How to breath' },]
      },
      {
        id: 3,
        name: 'Roma',
        posts: [{ id: 44, title: 'How to swim' }]
      },
    ]

What i am doing:

const expectedOutput = users.map(({id,name,postIds})=>({id,name,posts:posts.filter(post=>postIds.includes(post.id))}))

The problem is - i am doing too many iterations (map, filter and includes), thinking that, there is a possibility to do it in a more pretty way. Will be greatful for any ideas for refactoring

pilchard · Accepted Answer · 2021-09-16 22:00:17Z

3

Your solution seems fine, but if you wanted to cut down on complexity you can first create a lookup table of posts and then map against it.

Here using a Map for the lookup table, nested map() calls to iterate over each object/postIds array, and a nullish ?? check to return an object with just id if no matching post is found.

const users = [
  { id: 1, name: 'Vasya', postIds: [11, 22] },
  { id: 2, name: 'Petya', postIds: [33] },
  { id: 3, name: 'Roma', postIds: [44] },
];

const posts = [
  { id: 11, title: 'How to eat' },
  { id: 22, title: 'How to drink' },
  { id: 33, title: 'How to breath' },
  { id: 44, title: 'How to swim' },
];

const postsMap = new Map(posts.map((post) => [post.id, post]));

const result = users.map(({ postIds, ...user }) => ({
  ...user,
  posts: postIds.map((id) => postsMap.get(id) ?? { id }),
}));

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

answered Sep 16, 2021 at 22:00

pilchard

13.1k5 gold badges14 silver badges28 bronze badges

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

3 Comments

AlexUA Over a year ago

wow! looks awesome! interesting approach, never used new map before

pilchard Over a year ago

Glad it helped. If you need to for compatibilty you can replace the Map with an object.

AlexUA Over a year ago

no-no, its fine

Collectives™ on Stack Overflow

Combining 2 arrays of objects into 1 array of objects (refactoring request)

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related