जावास्क्रिप्ट वस्तुओं को HTML तत्वों के रूप में कैसे प्रदर्शित करें

इस ट्यूटोरियल में, आप सीखेंगे कि वेब पेज पर HTML तत्वों की सूची के रूप में जावास्क्रिप्ट ऑब्जेक्ट्स की सूची कैसे प्रदर्शित करें।

मान लें कि आपके पास जावास्क्रिप्ट ऑब्जेक्ट्स की एक सूची है, और आपको उन्हें वेब ब्राउज़र में HTML तत्वों के रूप में आउटपुट करने की आवश्यकता है। इस उदाहरण में, हमारे पास अभ्यासों की एक सूची है, जिसे एक जावास्क्रिप्ट ऑब्जेक्ट शाब्दिक द्वारा दर्शाया गया है।

JavaScript ऑब्जेक्ट शाब्दिक:

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>

JavaScript ऑब्जेक्ट शाब्दिक सरणी को HTML तत्वों के रूप में प्रदर्शित करना

हमें निम्नलिखित चार चरणों का ध्यान रखना होगा:

1. एचटीएमएल के साथ एक खाली अनियंत्रित सूची तत्व बनाएं, ताकि हम इसके अंदर अपनी व्यायाम सूची आइटम जोड़ सकें।
2. एक for का उपयोग करके JavaScript ऑब्जेक्ट शाब्दिक सरणी से सभी अभ्यासों को ढूंढें और पकड़ें लूप।
3. प्रत्येक व्यक्तिगत व्यायाम वस्तु को सूची आइटम के अंदर लपेटें (<li></li> ) टैग।
4. सूची आइटम HTML तत्वों को ब्राउज़र में अनियंत्रित सूची तत्व के अंदर आउटपुट करें (<ul></ul> ) जिसे हमने चरण 1 में बनाया है।

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

अब अपना ब्राउज़र कंसोल जांचें, और आपको यह देखना चाहिए:

अब हमारे पास प्रत्येक व्यक्तिगत व्यायाम वस्तु तक पहुंच है।

अब हमारे एकत्रित व्यायाम आइटम को सूची आइटम टैग के अंदर लपेटें:

सबसे पहले, आपके लूप के शुरू होने से ठीक पहले निम्न चर जोड़ें:

let exerciseItems = "";

अब अपने लूप के अंदर, इसे जोड़ें:

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

अब अगर आप console.log(exerciseItems) (आपके लूप के बाहर और नीचे) आपका कंसोल सूची आइटम तत्वों के अंदर लिपटे प्रत्येक व्यायाम आइटम को आउटपुट करेगा।

अंत में, हमारे व्यायाम आइटम को हमारे व्यायाम सूची तत्व के अंदर प्रदर्शित करने के लिए, इस कोड को अपने लूप के ठीक नीचे जोड़ें:

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

यहाँ एक कोडपेन है जिसमें सभी कार्यशील कोड हैं।