How can I merge 2 arrays of objects, adding the values from one key where the other keys' values are equal? [duplicate]

Question

I have 2 arrays, a user's array of skills, with each skill being an object:

{skill: string, points: number}

The other array are skill/point objects from a specific course that I want to merge into the user's array when the user adds this course.

e.g.

User's skills:

[
   {skill: "JavaScript", points: 5},
   {skill: "CSS", points: 3},
   {skill: "HTML", points: 1},
   {skill: "React", points: 4}
]

Course skills:

[
   {skill: "JavaScript", points: 2},
   {skill: "GraphQL", points: 1},
   {skill: "HTML", points: 2}
]

Desired result of user's skills:

[
   {skill: "JavaScript", points: 7},
   {skill: "CSS", points: 3},
   {skill: "HTML", points: 3},
   {skill: "React", points: 4},
   {skill: "GraphQL", points: 1}
]

Can someone help me figure this out? Thanks in advance.

Spectric · Accepted Answer · 2021-08-03 01:26:59Z

0

You can loop through courseSkills and find the item with the corresponding skill property. If it exists, you can add the points property. Otherwise, push the item into the array.

const userSkills = [{
    skill: "JavaScript",
    points: 5
  },
  {
    skill: "CSS",
    points: 3
  },
  {
    skill: "HTML",
    points: 1
  },
  {
    skill: "React",
    points: 4
  }
]

const courseSkills = [{
    skill: "JavaScript",
    points: 2
  },
  {
    skill: "GraphQL",
    points: 1
  },
  {
    skill: "HTML",
    points: 2
  }
]

courseSkills.forEach(e => {
  let found = userSkills.find(f => f.skill == e.skill);
  found ? found.points += e.points : userSkills.push(e)
})
console.log(userSkills);

edited Aug 3, 2021 at 1:26

answered Aug 3, 2021 at 1:21

Spectric

32.6k6 gold badges32 silver badges56 bronze badges

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

Comments

dacodr · Accepted Answer · 2021-08-03 02:13:10Z

0

You can use Array.prototype.reduce() for this after concatenating the two arrays together. This way you can avoid overwriting one of the original arrays.

const courseSkills = [
  { skill: "JavaScript", points: 2 },
  { skill: "GraphQL", points: 1 },
  { skill: "HTML", points: 2 }
]
const userSkills = [
  { skill: "JavaScript", points: 5 },
  { skill: "CSS", points: 3 },
  { skill: "HTML", points: 1 },
  { skill: "React", points: 4 }
]

const combinded = [...userSkills, ...courseSkills]
  .reduce((acc, cur) => {
    const index = acc.findIndex(i => i.skill === cur.skill);
    (index === -1) ? acc.push(cur) : acc[index].points += cur.points;
    return acc;
  }, []);

console.log(combinded);

answered Aug 3, 2021 at 2:13

dacodr

1675 bronze badges

2 Comments

Samuel Thoyre Over a year ago

This is perfect! Thank you very much!

dacodr Over a year ago

@SamuelThoyre You're welcome. Please remember to upvote and select the best answer

Spectric · Accepted Answer · 2021-08-03 03:02:06Z

Something like:

const skill = [
   {skill: "JavaScript", points: 5},
   {skill: "CSS", points: 3},
   {skill: "HTML", points: 1},
   {skill: "React", points: 4}
]

const skill2 = [
   {skill: "JavaScript", points: 2},
   {skill: "GraphQL", points: 1},
   {skill: "HTML", points: 2}
]

const merged = [...skill, ...skill2].reduce((acc,cur) => ({
    ...acc,
    [cur.skill]: acc[cur.skill] ? acc[cur.skill] + cur.points : cur.points
}), {});

// OUTPUT
// "merged": {
//     "JavaScript": 7,
//     "CSS": 3,
//     "HTML": 3,
//     "React": 4,
//     "GraphQL": 1
//   },

To be the same as the initial format:

const format = Object.entries(merged).map(([skill, points] )=> ({ skill, points }))

// OUTPUT
// "format": [
//     {
//       "skill": "JavaScript",
//       "points": 7
//     },
//     {
//       "skill": "CSS",
//       "points": 3
//     },
//     {
//       "skill": "HTML",
//       "points": 3
//     },
//     {
//       "skill": "React",
//       "points": 4
//     },
//     {
//       "skill": "GraphQL",
//       "points": 1
//     }
//   ]

Collectives™ on Stack Overflow

How can I merge 2 arrays of objects, adding the values from one key where the other keys' values are equal? [duplicate]

3 Answers 3

Comments

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Linked

Related