Αλλαγή στοιχείου κατά id σε JavaScript

Ας υποθέσουμε ότι στη μεταβλητή arr βρίσκεται ένας πίνακας αντικειμένων:

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

Ας υποθέσουμε ότι θέλουμε να αλλάξουμε κάποιο στοιχείο του πίνακα. Ας υποθέσουμε ότι τα νέα δεδομένα αποθηκεύονται σε μια μεταβλητή, για παράδειγμα, όπως αυτά:

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

Στο παραπάνω αντικείμενο id ταιριάζει με το id του δεύτερου στοιχείου του πίνακα, ενώ οι τιμές των ιδιοτήτων είναι διαφορετικές. Με άλλα λόγια στο data στην ιδιότητα id αποθηκεύεται το id του στοιχείου του πίνακα που θέλουμε να αλλάξουμε.

Ας εκτελέσουμε αυτήν την αλλαγή. Για αυτό θα επαναλάβουμε τα στοιχεία του πίνακα με βρόχο και, εάν το id ταιριάζει με το επιθυμητό, θα εκτελέσουμε αντικατάσταση του στοιχείου, ενώ εάν δεν ταιριάζει, θα αφήσουμε το στοιχείο αμετάβλητο:

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

Μπορούμε να συντομεύσουμε τον κώδικα, χρησιμοποιώντας τον τριαδικό τελεστή:

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

Ας υποθέσουμε ότι σε μια μεταβλητή αποθηκεύεται το id ενός στοιχείου του πίνακα. Δημιουργήστε ένα κουμπί, upon pressing το οποίο θα αλλάξει το αντίστοιχο στοιχείο του πίνακα.