React how to replace name if Id matches

Question

I have two arrays of objects result1 and result2

var result1 = [
    {id:1, name:'Sandra'},
    {id:2, name:'John'},
    {id:3, name:'Peter'},
    {id:4, name:'Bobby'}
];

var result2 = [
    {id:2, name:'Malai'},
    {id:4, name:'Lama'}
];

I want to update the name if id matches. My goal is:

 var result1 = [
        {id:1, name:'Sandra'},
        {id:2, name:'Malai'},
        {id:3, name:'Peter'},
        {id:4, name:'Lama'}
    ];

check https://stackoverflow.com/questions/37585309/replacing-objects-in-array — Doudin, Sep 10 '21 at 18:55
@Doudin It is related but strictly speaking not exactly the same, because it replaces whole object from `result1` with object from `result2` :) Instead of one property — Giorgi Moniava, Sep 10 '21 at 19:01

Giorgi Moniava · Accepted Answer · 2021-09-10T18:59:21.420

1

var result1 = [{
        id: 1,
        name: 'Sandra'
    },
    {
        id: 2,
        name: 'John'
    },
    {
        id: 3,
        name: 'Peter'
    },
    {
        id: 4,
        name: 'Bobby'
    }
];

var result2 = [{
        id: 2,
        name: 'Malai'
    },
    {
        id: 4,
        name: 'Lama'
    }
];

let results = result1.map(x => {
    let el = result2.find(y => y.id === x.id);
    if (el) return {
        ...x,
        name: el.name
    };
    return x;

});

console.log(results)

edited Sep 10 '21 at 18:59

answered Sep 10 '21 at 18:56

Giorgi Moniava

27,046
9
53
90

1

Nice answer. The usage of find, early return pattern and spread operator makes it really clean. – Pelicer Sep 10 '21 at 18:57

score 1 · Answer 2 · answered Sep 10 '21 at 19:12

var result1 = [
    {id:1, name:'Sandra'},
    {id:2, name:'John'},
    {id:3, name:'Peter'},
    {id:4, name:'Bobby'}
];

var result2 = [
    {id:2, name:'Malai'},
    {id:4, name:'Lama'}
];

const finalResult = result1.map((user, index) => {
 const match = result2.find(({ id }) => user.id === id)
 
 return match ? { ...user, name: match.name } : user
})

console.log(finalResult)

You can achieve that using map to map the result1 and the use find to match the current item inside the map to see if the result2 contains an object matching that id, if that's the case return the a new object containing the current user but with the match name, if not just return the user

score 0 · Answer 3 · answered Sep 10 '21 at 18:56

Try the snipped below. The code is pretty simple. We iterate through each object (person) of the first result array. For each of those persons we will iterate result2. If the same id is found, that person's object will be overwritten. The output of the code is a third array with the goal you presented.

var result1 = [
    {id:1, name:'Sandra'},
    {id:2, name:'John'},
    {id:3, name:'Peter'},
    {id:4, name:'Bobby'}
];

var result2 = [
    {id:2, name:'Malai'},
    {id:4, name:'Lama'}
];

const finalResult = result1.map(person => {
  for (let i = 0; i < result2.length; i++) {
    if(person.id === result2[i].id){
      person = result2[i];
      break;
    }
  }
  return person;
});

console.log(finalResult);

bfdes · Answer 4 · 2021-12-10T00:58:03.513

I think there is a way to solve this problem in a single pass.

From the examples you have given I am going to assume:

Both arrays are in sorted order w.r.t. ID
Elements within a given array have unique IDs

The idea is to identify the regions where the arrays overlap using two pointers. It is inspired by the merge subroutine in mergesort.

var i = 0 
var j = 0

while(i < result1.length && j < result2.length) {
  var left = result1[i]
  var right = result2[j]
  if(left.id > right.id) {
    j++ 
  } else if(left.id < right.id) {
    i++
  } else {
    left.name = right.name
    i++
    j++
  }
}

score -1 · Answer 5 · answered Sep 10 '21 at 19:30

-1

short syntax:

result1 = result1.map(el => ({...el, name: result2.find(item => el.id === item.id)?.name ?? el.name}))

answered Sep 10 '21 at 19:30

Reza Mirzapour

390
3
11

React how to replace name if Id matches

5 Answers5