इस ट्यूटोरियल में, आप सीखेंगे कि JavaScript ऑब्जेक्ट्स की सूची को वेब पेज पर HTML एलिमेंट्स की सूची के रूप में कैसे प्रदर्शित किया जाए।
मान लीजिए आपके पास JavaScript ऑब्जेक्ट्स की एक सूची है, और आपको उन्हें वेब ब्राउज़र में HTML एलिमेंट्स के रूप में आउटपुट करने की आवश्यकता है। इस उदाहरण में, हमारे पास अभ्यासों की एक सूची है, जिसे JavaScript ऑब्जेक्ट लिटरल द्वारा दर्शाया गया है।
JavaScript ऑब्जेक्ट लिटरल:
let exerciseList = [ { name: "Deadlift", }, { name: "Push-up", }, { name: "Pull-up", }, { name: "Squat", }, ];उपरोक्त चार ऑब्जेक्ट्स (अभ्यास) के साथ एक JavaScript ऑब्जेक्ट लिटरल ऐरे है। हम उन ऑब्जेक्ट्स को ब्राउज़र में एक सूची के रूप में प्रदर्शित करना चाहते हैं, जैसे:
- 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>JavaScript ऑब्जेक्ट लिटरल ऐरे को HTML एलिमेंट्स के रूप में प्रदर्शित करना
हमें निम्न चार चरणों का ध्यान रखने की आवश्यकता है:
- HTML के साथ एक खाली अनऑर्डर्ड सूची एलिमेंट बनाएं, ताकि हम इसके अंदर अपने अभ्यास सूची आइटम जोड़ सकें।
forलूप का उपयोग करके JavaScript ऑब्जेक्ट लिटरल ऐरे से सभी अभ्यासों को ढूंढें और पकड़ें।- प्रत्येक व्यक्तिगत अभ्यास ऑब्जेक्ट को सूची आइटम (
<li></li>) टैग्स के अंदर लपेटें। - चरण 1 में बनाए गए अनऑर्डर्ड सूची एलिमेंट (
<ul></ul>) के अंदर ब्राउज़र में सूची आइटम HTML एलिमेंट्स आउटपुट करें।
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 सूची आइटम एलिमेंट के अंदर लपेटना
अब आइए अपने एकत्रित अभ्यास आइटम्स को सूची आइटम टैग के अंदर लपेटें:
सबसे पहले, अपने for लूप शुरू होने से ठीक पहले निम्न वेरिएबल जोड़ें:
let exerciseItems = "";अब अपने लूप के अंदर, यह जोड़ें:
exerciseItems += "<li>" + exercise.name + "</li>";अब यदि आप console.log(exerciseItems) करते हैं (अपने लूप के बाहर और नीचे) तो आपका कंसोल प्रत्येक अभ्यास आइटम को सूची आइटम एलिमेंट्स के अंदर लपेटा हुआ आउटपुट करेगा।
4. अभ्यास आइटम्स को अभ्यास सूची के अंदर जोड़ें
अंत में, हमारे अभ्यास आइटम्स को हमारे अभ्यास सूची एलिमेंट के अंदर प्रदर्शित करने के लिए, अपने 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 है।
