জাভাস্ক্রিপ্ট অবজেক্টকে HTML এলিমেন্ট হিসেবে প্রদর্শন করা

এই টিউটোরিয়ালে, আপনি শিখবেন কীভাবে জাভাস্ক্রিপ্ট অবজেক্টের একটি লিস্টকে ওয়েব পৃষ্ঠায় HTML এলিমেন্টের একটি লিস্ট হিসেবে প্রদর্শন করতে হয়।

মান লিন আপনার কাছে জাভাস্ক্রিপ্ট অবজেক্টের একটি লিস্ট আছে, এবং আপনাকে সেগুলো ব্রাউজারে HTML এলিমেন্ট হিসেবে আউটপুট করতে হবে। এই উদাহরণে, আমাদের কাছে এক্সারসাইজের একটি লিস্ট আছে, যা জাভাস্ক্রিপ্ট অবজেক্ট লিটারেল দ্বারা উপস্থাপিত।

জাভাস্ক্রিপ্ট অবজেক্ট লিটারেল:

let exerciseList = [ { name: "Deadlift", }, { name: "Push-up", }, { name: "Pull-up", }, { name: "Squat", }, ];

উপরোক্তটি চারটি অবজেক্ট (এক্সারসাইজ) সম্বলিত একটি জাভাস্ক্রিপ্ট অবজেক্ট লিটারেল অ্যারে। আমরা সেই অবজেক্টগুলো নিলে ব্রাউজারে একটি লিস্ট হিসেবে প্রদর্শন করতে চাই, এরকম:

• Deadlift
• Pull-up
• Push-up
• Squat

এটি একটি অনঅর্ডার্ড লিস্ট। আপনি যদি উপরের লিস্টটি Chrome DevTools-এ ইন্সপেক্ট করেন, তবে লিস্টটির HTML মার্কআপ এরকম দেখাবে:

<ul> <li>Deadlift</li> <li>Pull-up</li> <li>Push-up</li> <li>Squat</li> </ul>

জাভাস্ক্রিপ্ট অবজেক্ট লিটারেল অ্যারেকে HTML এলিমেন্ট হিসেবে প্রদর্শন করা

আমাদের নিচের চারটি ধাপটি নিতে হবে:

1. HTML-এ একটি খালি অনঅর্ডার্ড লিস্ট এলিমেন্ট তৈরি করা, যাতে আমরা আমাদের এক্সারসাইজ লিস্ট আইটেমগুলো তার ভিতরে যোগ করতে পারি।
2. একটি for লুপ ব্যবহার করে জাভাস্ক্রিপ্ট অবজেক্ট লিটারেল অ্যারে থেকে সকল এক্সারসাইজ খুঁজে বের করা এবং ধরে রাখা।
3. প্রতিটি এক্সারসাইজ অবজেক্টকে লিস্ট আইটেম (<li></li>) ট্যাগের ভিতরে র‍্যাপ করা।
4. স্টেপ ১-এ তৈরি করা অনঅর্ডার্ড লিস্ট এলিমেন্ট (<ul></ul>) এর ভিতরে লিস্ট আইটেম HTML এলিমেন্টগুলো ব্রাউজারে আউটপুট করা।

১. একটি খালি অনঅর্ডার্ড লিস্ট এলিমেন্ট তৈরি করা

HTML-এ একটি খালি অনঅর্ডার্ড লিস্ট এলিমেন্ট সেট আপ করতে, আপনার index.html-এ (অথবা CodePen-এর মত যদি HTML উইন্ডো ব্যবহার করেন তবে সেখানে) নিচের কোডটি যোগ করুন:

<ul class="exercise-list"></ul>

এখন সেই অনঅর্ডার্ড লিস্টটির একটি রেফারেন্স একটি ভেরিয়েবলে এসাইন করি, যাতে পরে আমরা সেটি আমাদের অনঅর্ডার্ড লিস্টে যোগ করতে পারি। আপনার স্ক্রিপ্ট ফাইলের শীর্ষে নিচের কোডটি যোগ করুন:

let exerciseList = document.querySelector(".exercise-list");

২. এক্সারসাইজ অবজেক্টগুলোর মাধ্যমে লুপ করা

যেহেতু আমরা একটি অ্যারের ভিতরে আলাদা আলাদা এক্সারসাইজ অবজেক্টের সাথে কাজ করছি, তাই সেগুলোর সাথে কিছু করার আগে আমাদের প্রতিটি এক্সারসাইজের মাধ্যমে লুপ (ইটারেট) করতে হবে।

আপনার JS অবজেক্টের ঠিক নিচে নিচের কোডটি যোগ করুন:

for (let exercise of exerciseList) { console.log(exercise.name); }

এখন আপনার সম্পূর্ণ স্ক্রিপ্ট ফাইলটি এরকম দেখাবে:

let exerciseList = document.querySelector(".exercise-list"); let exerciseObjects = [ { name: "Deadlift", }, { name: "Push-up", }, { name: "Pull-up", }, { name: "Squat", }, ]; for (exercise of exerciseObjects) { console.log(exercise.name); }

এখন আপনার ব্রাউজার কনসোল চেক করুন, এবং আপনি এটি দেখতে পাবেন:

এখন আমাদের প্রতিটি এক্সারসাইজ অবজেক্টে এক্সেস আছে।

৩. প্রতিটি এক্সারসাইজকে HTML লিস্ট আইটেম এলিমেন্টের ভিতরে র‍্যাপ করা

এখন আমাদের সংগ্রহ করা এক্সারসাইজ আইটেমগুলোকে লিস্ট আইটেম ট্যাগের ভিতরে র‍্যাপ করি:

প্রথমে, আপনার for লুপ শুরু হওয়ার ঠিক আগে নিচের ভেরিয়েবলটি যোগ করুন:

let exerciseItems = "";

এখন আপনার লুপের ভিতরে এটি যোগ করুন:

exerciseItems += "<li>" + exercise.name + "</li>";

এখন আপনি যদি console.log(exerciseItems) করেন (লুপের বাইরে এবং নিচে) তবে আপনার কনসোল প্রতিটি এক্সারসাইজ আইটেমকে লিস্ট আইটেম এলিমেন্টের ভিতরে র‍্যাপ করে আউটপুট করবে।

৪. এক্সারসাইজ আইটেমগুলোকে এক্সারসাইজ লিস্টের ভিতরে যোগ করা

শেষে, আমাদের এক্সারসাইজ আইটেমগুলোকে আমাদের এক্সারসাইজ লিস্ট এলিমেন্টের ভিতরে প্রদর্শন করতে, আপনার for লুপের ঠিক নিচে এই কোডটি যোগ করুন:

exerciseList.innerHTML = exerciseItems;

যদি আপনি সব কিছু সঠিকভাবে করছেন, তবে আপনার অনঅর্ডার্ড এক্সারসাইজ লিস্ট এখন ব্রাউজার উইন্ডোর ভিতরে সকল এক্সারসাইজ আইটেম প্রদর্শন করবে।

এখানে আমাদের লেখা সকল কোড রেফারেন্স হিসেবে দেওয়া হল:

(function() { let exerciseList = document.querySelector(".exercise-list"); let exerciseObjects = [ { name: "Deadlift", }, { name: "Push-up", }, { name: "Pull-up", }, { name: "Squat", }, ]; let exerciseItems = ""; for (exercise of exerciseObjects) { exerciseItems += "<li>" + exercise.name + "</li>"; } exerciseList.innerHTML = exerciseItems; })();

সকল কাজ করার কোডসহ একটি CodePen এখানে দেওয়া আছে।