How to apply classes on array of objects from another array based on id

Question

Hi I have a array of objects containing users with property uid and name and, I have one more array of objects this array contains uid and className. Now I want to apply these classes on users based on uid and if the uid is not present in classesArray then offline class should apply to all those users and these arrays are not sorted

userArray = [
  { uid: 11, uname: "nana" },
  { uid: 12, uname: "jack" },
  { uid: 17, uname: "wazir" },
  { uid: 15, uname: "cobra" },
  { uid: 16, uname: "janes" },
  { uid: 14, uname: "furan" },
  { uid: 13, uname: "arvind" },
];

classesArray = [
  { uid: 11, class: "online" },
  { uid: 14, class: "busy" },
  { uid: 13, class: "offline" },
  { uid: 12, class: "online" },
];

and i want the array like this:

MergedArray = [
  { uid: 11, unane: "nana", class: "online" },
  { uid: 12, unane: "jack", class: "online" },
  { uid: 13, unane: "arvind", class: "offline" },
  { uid: 14, uname: "furan", class: "busy" },
  { uid: 15, uname: "cobra", class: "offline" },
  { uid: 16, uname: "janes", class: "offline" },
  { uid: 17, uname: "wazir", class: "offline" },
];

Welcome to SO. You should add the code you've attempted to your question. You might find reading the site help section useful when it comes to asking a good question, and this question checklist. — Andy
– Andy, Commented Aug 14, 2021 at 8:38

Viet · Accepted Answer · 2021-08-14 08:42:57Z

3

You can use map and find like this:

const mergeArray = userArray.map((userItem) => {
  classesItem = classesArray.find((item) => item.uid === userItem.uid);
  return classesItem ? { ...userItem, class: classesItem.class } : {...userItem, class: "offline" };
});

edited Aug 14, 2021 at 8:42

answered Aug 14, 2021 at 8:37

Viet

12.9k2 gold badges18 silver badges23 bronze badges

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

Collectives™ on Stack Overflow

How to apply classes on array of objects from another array based on id

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related