Elementin muuttaminen id:n perusteella JavaScriptissä

Olkoon muuttujassa arr objektitaulukko:

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

Oletetaan, että haluamme muuttaa jonkin taulukon elementin. Oletetaan, että uudet tiedot tallennetaan muuttujaan, esimerkiksi seuraavasti:

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

Esitellyssä objektissa id vastaa taulukon toisen elementin id:tä, mutta ominaisuuksien arvot ovat erilaiset. Toisin sanoen data:n id-ominaisuudessa tallennetaan sellaisen taulukon elementin id, jota haluamme muuttaa.

Suoritetaan tämä muutos. Tätä varten käymme läpi taulukon elementit silmukalla ja, jos id vastaa etsittävää, suoritamme elementin korvaamisen, ja jos ei vastaa, jätämme elementin ennalleen:

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

Koodia voidaan lyhentää käyttämällä ternary -operaattoria:

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

Olkoon muuttujassa tallennettuna taulukon elementin id. Luo painike, jota painettaessa vastaava taulukon elementti muuttuu.