JavaScript-এ id দ্বারা উপাদান পরিবর্তন

ধরুন চলরাশি 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 সংরক্ষিত আছে। একটি বাটন তৈরি করুন, যাতে ক্লিক করলে অ্যারের সংশ্লিষ্ট উপাদানটি পরিবর্তিত হবে।