Ändra element efter id i JavaScript

Låt variabeln arr innehålla en array av objekt:

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',
	},
];

Låt oss säga att vi vill ändra något element i arrayen. Låt de nya datana lagras i en variabel, till exempel så här:

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

I det angivna objektet matchar id id för det andra elementet i arrayen, medan värdena för egenskaperna är andra. Med andra ord, i data lagras i egenskapen id id för det arrayelement som vi vill ändra.

Låt oss utföra denna ändring. För att göra detta kommer vi att iterera genom arrayelementen med en loop och om id matchar den sökta, utför vi en ersättning av elementet, och om den inte matchar, lämnar vi elementet oförändrat:

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

Koden kan förkortas genom att använda den ternära operatorn:

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

Låt en variabel innehålla id för ett element i arrayen. Skapa en knapp som, när den klickas på, ändrar motsvarande element i arrayen.