In an array of objects, how to update (not just find) the object having property X equal to Y?

Question

My array of objects contains objects of different kinds, meaning they can have very different properties. However they all share an id property.

When my app's user wants to update one of these objects, I need to find that object in the array based on the id and update all its properties, probably using Object.assign().

I know how to find and return the object I want based on the id, but not how to update it as well. Any idea?

let myArray = [
  {
    id: 1,
    name: 'john',
    age: '22',
    position: 'developer'
  },
  {
    id: 2,
    name: 'james',
    age: '31',
    position: 'designer'
  },
  {
    id: 1,
    name: 'david',
    age: '45',
    position: 'teacher'
  }
]

let updateForJames = {
    age: '38',
    position: 'project manager'
}

let JamesId = 2

Object.assign(myArray, {
    // ...
})

JSFiddle

Does this answer your question? How to change value of object which is inside an array using JavaScript or jQuery? — user5734311
– user5734311, Commented Dec 22, 2019 at 12:24

Nick Parsons · Accepted Answer · 2023-12-24 13:17:25Z

3

If you're happy with changing the array in-place you can use .find() to find the object with the given id, and then update that object using Object.assign() like so:

const myArray = [{ id: 1, name: 'john', age: '22', position: 'developer' }, { id: 2, name: 'james', age: '31', position: 'designer' }, { id: 1, name: 'david', age: '45', position: 'teacher' }];
const updateForJames = {
  age: '38',
  position: 'project manager'
}
const JamesId = 2;

const jamesobj = myArray.find(({id}) => id === JamesId) || {};
Object.assign(jamesobj, updateForJames);
console.log(myArray);

Alternatively, if you want to get a new array (rather than modifying it in place) you can .map() each object to a new object, and add the new contents in updateForJames when James's id appears using the spread syntax:

const myArray = [{ id: 1, name: 'john', age: '22', position: 'developer' }, { id: 2, name: 'james', age: '31', position: 'designer' }, { id: 1, name: 'david', age: '45', position: 'teacher' }];
const updateForJames = {
  age: '38',
  position: 'project manager'
};
const JamesId = 2;

const newArray = myArray.map((person) => person.id === JamesId 
  ? {...person, ...updateForJames} 
  : person
);
console.log(newArray);

edited Dec 24, 2023 at 13:17

answered Dec 22, 2019 at 12:18

Nick Parsons

51.7k6 gold badges61 silver badges80 bronze badges

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

11 Comments

drake035 Over a year ago

Thanks! It works however I don't understand why: I'm using first option as I need to change the array in place, but you're using Object.assign() on jamesobj not on the array in place, so how can the latter be modified? I dont' get it

Nick Parsons Over a year ago

So .find() returns a reference to the object inside the array. This means when you change a property on this reference you're actually changing the object inside the array. Object.assign() allows us to change multiple properties at once in the reference (and thus the object inside the array)

Nick Parsons Over a year ago

So it's a similar idea to what's happening here, just Object.assign() allows us to change multiple properties at once on the reference rather than just one property at a time

drake035 Over a year ago

Thanks for the clarification, now I got it :)

drake035 Over a year ago

What a stupid omission from me, sorry for that. Works now and I also see now the reason behind that weirdness in the console. Thanks a lot and have a nice day!

|

Collectives™ on Stack Overflow

In an array of objects, how to update (not just find) the object having property X equal to Y?

1 Answer 1

11 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related