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

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

ধরা যাক আপনার কাছে জাভাস্ক্রিপ্ট অবজেক্টের একটি তালিকা রয়েছে এবং আপনাকে সেগুলিকে ওয়েব ব্রাউজারে HTML উপাদান হিসাবে আউটপুট করতে হবে। এই উদাহরণে, আমাদের কাছে অনুশীলনের একটি তালিকা রয়েছে, যা একটি জাভাস্ক্রিপ্ট অবজেক্ট আক্ষরিক দ্বারা প্রতিনিধিত্ব করে৷

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

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

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

• ডেডলিফ্ট
• টান আপ
• পুশ-আপ
• স্কোয়াট

এটি একটি ক্রমহীন তালিকা। আপনি যদি উপরের তালিকাটি Chrome DevTools-এ পরিদর্শন করেন, তাহলে উপরের তালিকার জন্য HTML মার্কআপটি এরকম দেখাবে:

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

এইচটিএমএল উপাদান হিসাবে জাভাস্ক্রিপ্ট অবজেক্ট আক্ষরিক অ্যারে প্রদর্শন করা হচ্ছে

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

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

1. একটি খালি ক্রমহীন তালিকা উপাদান তৈরি করুন

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

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

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

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

2. ব্যায়াম বস্তুর মাধ্যমে লুপ করুন

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

আপনার 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);
}

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

এখন আমরা প্রতিটি পৃথক ব্যায়াম বস্তুর অ্যাক্সেস আছে.

3. একটি HTML তালিকা আইটেম উপাদানের ভিতরে প্রতিটি অনুশীলন মোড়ানো

এখন আমাদের সংগৃহীত ব্যায়াম আইটেমগুলিকে তালিকা আইটেম ট্যাগের ভিতরে মোড়ানো যাক:

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

let exerciseItems = "";

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

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

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

4. ব্যায়াম তালিকার মধ্যে ব্যায়াম আইটেম যোগ করুন

অবশেষে, আমাদের ব্যায়াম তালিকার উপাদানের মধ্যে আমাদের ব্যায়াম আইটেমগুলি প্রদর্শন করতে, আপনার লুপের ঠিক নীচে এই কোডটি যোগ করুন:

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;
})();

এখানে সমস্ত কাজের কোড সহ একটি কোডপেন রয়েছে।