Search element in array based on another array and change property

Question

I have two array of objects like this:

const officers: any[] = [
  { id: 20, name: 'Captain Piett' },
  { id: 24, name: 'General Veers' },
  { id: 56, name: 'Admiral Ozzel' },
  { id: 88, name: 'Commander Jerjerrod' }
];

const searchAndChangeFor: any[] = [
  { id: 56, name: 'New Name', additionalData: 1 },
];

I want to find elements from searchAndChangeFor in officers and modify content. Usually If I have one element I do this:

officers.map((item) => {
    // I want to modify id: 56 and update officers here.
    item.id === 56 ? { ...item, name: 'Change name for 56' } : item
});

But I need to search by array not single element so I've tried this but not succeeded:

officers.map((item) => {
   searchAndChangeFor.find((item2) => {
       item.id === item2.id? { ...item, name: 'Change name for 56' } : item
   }); 
});

Expected Output:

  { id: 20, name: 'Captain Piett' },
  { id: 24, name: 'General Veers' },
  { id: 56, name: 'New Name', additionalData: 1 },
  { id: 88, name: 'Commander Jerjerrod' }

It goes crazy with array. How can I find elements in officers based on searchAndChangeFor and change its name? I also want to keep all other existing items in officers.

Either add a return inside map and find or remove the {} for implicit return — adiga
– adiga, Commented May 28, 2019 at 8:09

adiga · Accepted Answer · 2019-05-28 08:45:31Z

3

You could map the officers array. Get the object with the same id in searchAndChangeFor using find. Merge them using spread syntax

If you just want to merge, you could just do

return { ...item, ...searchAndChangeFor.find(o => o.id === item.id) }

But, if you want to add new properties when a match is found, you can conditionally return like below:

const officers=[{id:20,name:'Captain Piett'},{id:24,name:'General Veers'},{id:56,name:'Admiral Ozzel'},{id:88,name:'Commander Jerjerrod'}],
    searchAndChangeFor = [{id:56,name:'New Name',additionalData:1},];
    
const output = officers.map(item => {
  const found = searchAndChangeFor.find(o => o.id === item.id);
  if (found)
    return { ...item, ...found, newProperty: 'value' }
  else
    return item;
})

console.log(output)

Another option is to clone the officers array to avoid mutation and loop through the searchAndChangeFor instead (since it is the smaller array)

const officers=[{id:20,name:'Captain Piett'},{id:24,name:'General Veers'},{id:56,name:'Admiral Ozzel'},{id:88,name:'Commander Jerjerrod'}],
    searchAndChangeFor = [{id:56,name:'New Name',additionalData:1},],
    output = [...officers];

searchAndChangeFor.forEach(s => {
  const index = officers.findIndex(o => o.id === s.id);
  output[index] = Object.assign({}, output[index], s)
})

console.log(output)

edited May 28, 2019 at 8:45

answered May 28, 2019 at 8:16

adiga

35.4k9 gold badges65 silver badges88 bronze badges

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

5 Comments

Dennis Over a year ago

I would like to be able to modify matched element beyond searchAndChangeFor. For example, I added additionalData. I want to add more property when I found matched element. Nina's solution find its and modify on-the-fly. Also, array is huge in real-world. I do not want to clone it. (But i guess second approach is best due to search is small)

adiga Over a year ago

The output has additionalData. If you want to add more properties, you can add after the find spread. { ...item, ...searchAndChangeFor.find(o => o.id === item.id), anotherProperty: "value" }

Dennis Over a year ago

But that will add to all elements or just matched element?

adiga Over a year ago

@Pratha then you'd have to use ternary operator on find. Also, are you okay with mutation of officers array using forEach? Or do you want new array without modifying officers?

adiga Over a year ago

@Pratha updated the first snippet to add new properties when match is found

Nina Scholz · Accepted Answer · 2019-05-28 08:10:25Z

1

You could find the item and change with the found name or return the item without change.

const
    officers = [{ id: 20, name: 'Captain Piett' }, { id: 24, name: 'General Veers' }, { id: 56, name: 'Admiral Ozzel' }, { id: 88, name: 'Commander Jerjerrod' }],
    searchAndChangeFor = [{ id: 56, name: 'New Name', additionalData: 1 }],
    result = officers.map((item) => {
        let temp = searchAndChangeFor.find((item2) => item.id === item2.id); 
        return temp ? { ...item, name: temp.name } : item;
    });

console.log(result);

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

answered May 28, 2019 at 8:10

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

Comments

David Barker · Accepted Answer · 2019-05-28 08:20:42Z

1

find is expecting a boolean response, when it receives true it returns the item that true was returned for, you are attempting to mutate the item directly in the find callback body. This isn't what you need to do, you want to just change the value where the id exists in your searchAndChangeFor for array.

const ids = searchAndChangeFor.map((rel) => rel.id);
const changed = officers.map((item) => ids.includes(item.id) ?
    {{ Item mutation logic here }} :
    item);

edited May 28, 2019 at 8:20

answered May 28, 2019 at 8:14

David Barker

14.6k3 gold badges51 silver badges77 bronze badges

Comments

Carsten · Accepted Answer · 2019-05-28 08:32:23Z

1

Assuming you want to preserve all properties of the objects of officers and searchAndChangeFor:

const officers = [
    { id: 20, name: 'Captain Piett' },
    { id: 24, name: 'General Veers' },
    { id: 56, name: 'Admiral Ozzel', admiralSince: 2008 },
    { id: 88, name: 'Commander Jerjerrod' }
];

const searchAndChangeFor = [
    { id: 56, name: 'New Name', additionalData: 1 },
];

const newOfficers = officers.map(officer => {
    const changedOfficer = searchAndChangeFor.find(changedOfficer => changedOfficer.id === officer.id)
    return changedOfficer ? { ...officer, ...changedOfficer } : officer;
});

console.log(newOfficers);

answered May 28, 2019 at 8:32

Carsten

9536 silver badges7 bronze badges

Comments

void · Accepted Answer · 2019-05-28 08:10:33Z

The issue with your code is that .map expects you to return a value to be stored in the resulting array, whereas you are not returning anything.

You can keep an array of all the ids of searchAndChangeFor. This will be computed only once so it will be efficient, and will be easier to compare with the officer.id in the .map.

const officers = [
  { id: 20, name: 'Captain Piett' },
  { id: 24, name: 'General Veers' },
  { id: 56, name: 'Admiral Ozzel' },
  { id: 88, name: 'Commander Jerjerrod' }
];

const searchAndChangeFor = [
  { id: 56, name: 'Admiral Ozzel' },
];

const allIDsToChange = searchAndChangeFor.map(el => el.id);
const newOfficers = officers.map((item) => allIDsToChange.includes(item.id) ? { ...item,
  name: 'Change name for 56'
} : item);

console.log(newOfficers);

Joseph · Accepted Answer · 2019-05-28 08:14:58Z

-2

you can find the item and if found change the name and return the changed item or return item simply (without change)

officers.map((item) => {
   searchAndChangeFor.find((item2) => {
       if (item.id === item2.id) {
          return { ...item, name: 'Change name for 56' } 
       }
   }) || item; 
});

answered May 28, 2019 at 8:14

Joseph

6925 silver badges17 bronze badges

Collectives™ on Stack Overflow

Search element in array based on another array and change property

6 Answers 6

5 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

5 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related