Een element wijzigen op id in JavaScript

Stel dat in de variabele arr een array van objecten ligt:

let arr = [
	{
		id: 'GYi9GauC4gBF1e2SixDvu',
		prop1: 'value11',
		prop2: 'value12',
		prop3: 'value13',
	},
	{
		id: 'IWSpfBPSV3SXgRF87uO74',
		prop1: 'value21',
		prop2: 'value22',
		prop3: 'value23',
	},
	{
		id: 'JAmjRlfQT8rLTm5tG2m1L',
		prop1: 'value31',
		prop2: 'value32',
		prop3: 'value33',
	},
];

Stel dat we een element van de array wil wijzigen. Stel dat de nieuwe gegevens in een variabele zijn opgeslagen, bijvoorbeeld als volgt:

let data = {
	id: 'IWSpfBPSV3SXgRF87uO74',
	prop1: 'value21 !',
	prop2: 'value22 !',
	prop3: 'value23 !',
};

In het gegeven object komt de id overeen met de id van het tweede element van de array, maar de waarden van de eigenschappen zijn anders. Met andere woorden, in data wordt in de eigenschap id de id opgeslagen van het array-element dat we willen wijzigen.

Laten we deze wijziging uitvoeren. Hiervoor doorlopen we de elementen van de array met een lus en, als de id overeenkomt met de gezochte, voeren we vervanging van het element uit, en als deze niet overeenkomt, laten we het element ongewijzigd:

let res = arr.map(elem => {
	if (elem.id === data.id) {
		return data;
	} else {
		return elem;
	}
});

De code kan worden verkort door gebruik te maken van de ternaire operator:

let res = arr.map(elem => elem.id === data.id ? data : elem);

Stel dat in een variabele de id van een element van de array wordt opgeslagen. Maak een knop, waarop bij het klikken het corresponderende element van de array wordt gewijzigd.