Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to Show Only First of Array with Same ID & Merge it Into New Array

Supposed I have two array of objects. Posts and Users.

Posts:

[
  {
    "userId": 1,
    "id": 1,
    "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit"
  },
  {
    "userId": 1,
    "id": 2,
    "title": "qui est esse",
  },
  {
    "userId": 1,
    "id": 3,
    "title": "ea molestias quasi exercitationem repellat qui ipsa sit aut",
  },
  {
    "userId": 2,
    "id": 11,
    "title": "et ea vero quia laudantium autem",
  },
  {
    "userId": 2,
    "id": 12,
    "title": "in quibusdam tempore odit est dolorem",
  },
  {
    "userId": 2,
    "id": 13,
    "title": "dolorum ut in voluptas mollitia et saepe quo animi",
  },
  {
    "userId": 3,
    "id": 21,
    "title": "asperiores ea ipsam voluptatibus modi minima quia sint",
  },
  {
    "userId": 3,
    "id": 22,
    "title": "dolor sint quo a velit explicabo quia nam",
  },
  {
    "userId": 4,
    "id": 31,
    "title": "ullam ut quidem id aut vel consequuntur",
  },
  {
    "userId": 4,
    "id": 32,
    "title": "doloremque illum aliquid sunt",
  },
  {
    "userId": 4,
    "id": 33,
    "title": "qui explicabo molestiae dolorem",
  },
  {
    "userId": 4,
    "id": 34,
    "title": "magnam ut rerum iure",
  },
]

Users:

[
  {
    "id": 1,
    "name": "Leanne Graham",
    "username": "Bret",
  },
  {
    "id": 2,
    "name": "Ervin Howell",
    "username": "Antonette",
  },
  {
    "id": 3,
    "name": "Clementine Bauch",
    "username": "Samantha",
  },
  {
    "id": 4,
    "name": "Patricia Lebsack",
    "username": "Karianne",
  },
  {
    "id": 5,
    "name": "Chelsey Dietrich",
    "username": "Kamren",
  },
]

As you can see, the posts has multiple userId. I want to show only first of each object with same userId.

Second, I want to push Users with same id into new Posts.

So, the result final array would be like this:

New Posts:

[
  {
    "userId": 1,
    "id": 1,
    "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
    "name": "Leanne Graham",
    "username": "Bret",
  },
  {
    "userId": 2,
    "id": 11,
    "title": "et ea vero quia laudantium autem",
    "name": "Ervin Howell",
    "username": "Antonette",
  },
  {
    "userId": 3,
    "id": 21,
    "title": "asperiores ea ipsam voluptatibus modi minima quia sint",
    "name": "Clementine Bauch",
    "username": "Samantha",
  },
  {
    "userId": 4,
    "name": "Patricia Lebsack",
    "username": "Karianne",
  },
]

Please note that I want to push name & username only, because Posts already have id of posts.

What is best approaches to achieve it?

Tags:

2

Answers


  1. 0

    Use spread syntax to combine each user with the first match found for that userId in posts.

    Use flatMap to easily reject users where there is no matching post (if you return an empty array, flatMap will effectively ignore it).

    let users = [{"id":1,"name":"Leanne Graham","username":"Bret"},{"id":2,"name":"Ervin Howell","username":"Antonette"},{"id":3,"name":"Clementine Bauch","username":"Samantha"},{"id":4,"name":"Patricia Lebsack","username":"Karianne"},{"id":5,"name":"Chelsey Dietrich","username":"Kamren"}]
let posts = [{"userId":1,"id":1,"title":"sunt aut facere repellat provident occaecati excepturi optio reprehenderit"},{"userId":1,"id":2,"title":"qui est esse"},{"userId":1,"id":3,"title":"ea molestias quasi exercitationem repellat qui ipsa sit aut"},{"userId":2,"id":11,"title":"et ea vero quia laudantium autem"},{"userId":2,"id":12,"title":"in quibusdam tempore odit est dolorem"},{"userId":2,"id":13,"title":"dolorum ut in voluptas mollitia et saepe quo animi"},{"userId":3,"id":21,"title":"asperiores ea ipsam voluptatibus modi minima quia sint"},{"userId":3,"id":22,"title":"dolor sint quo a velit explicabo quia nam"},{"userId":4,"id":31,"title":"ullam ut quidem id aut vel consequuntur"},{"userId":4,"id":32,"title":"doloremque illum aliquid sunt"},{"userId":4,"id":33,"title":"qui explicabo molestiae dolorem"},{"userId":4,"id":34,"title":"magnam ut rerum iure"}]

let result = users.flatMap(({id, ...user}, post) =>
  (post = posts.find(p => p.userId===id), post ? {...post, ...user} : []))

console.log(result)
    Login or Signup to reply.
  2. 0

    You can first create a lookup table (ie a Map) that maps your user ids to user objects (without the id key) so that you can later merge these objects with your post object. Then you can group your posts array by userId using Map.groupBy which gives you a Map of userId keys that point to arrays of posts with the same userId. You can then use Array.from() to grab each post from each group defined within the Map’s values, and use the mapping function of Array.from() to map the first post object of each group to a new object containing the merged user object from the lookup table created before with the post object:

    const posts = [ { "userId": 1, "id": 1, "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit" }, { "userId": 1, "id": 2, "title": "qui est esse", }, { "userId": 1, "id": 3, "title": "ea molestias quasi exercitationem repellat qui ipsa sit aut", }, { "userId": 2, "id": 11, "title": "et ea vero quia laudantium autem", }, { "userId": 2, "id": 12, "title": "in quibusdam tempore odit est dolorem", }, { "userId": 2, "id": 13, "title": "dolorum ut in voluptas mollitia et saepe quo animi", }, { "userId": 3, "id": 21, "title": "asperiores ea ipsam voluptatibus modi minima quia sint", }, { "userId": 3, "id": 22, "title": "dolor sint quo a velit explicabo quia nam", }, { "userId": 4, "id": 31, "title": "ullam ut quidem id aut vel consequuntur", }, { "userId": 4, "id": 32, "title": "doloremque illum aliquid sunt", }, { "userId": 4, "id": 33, "title": "qui explicabo molestiae dolorem", }, { "userId": 4, "id": 34, "title": "magnam ut rerum iure", }, ];
const users = [ { "id": 1, "name": "Leanne Graham", "username": "Bret", }, { "id": 2, "name": "Ervin Howell", "username": "Antonette", }, { "id": 3, "name": "Clementine Bauch", "username": "Samantha", }, { "id": 4, "name": "Patricia Lebsack", "username": "Karianne", }, { "id": 5, "name": "Chelsey Dietrich", "username": "Kamren", }, ];

const userLut = new Map(users.map(({id, ...usr}) => [id, usr]));
const res = Array.from(
  Map.groupBy(posts, post => post.userId).values(),
  ([post]) => ({...post, ...userLut.get(post.userId)})
);

console.log(res);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search