इस बार हम अल्पाइन जेएस का उपयोग करके एपीआई से डेटा लाना सीखेंगे। हम एक वेबसाइट बनाएंगे जो निम्नलिखित एपीआई से ली गई इंग्लिश प्रीमियर लीग में खेलने वाले फुटबॉल क्लबों की एक सूची प्रदर्शित करेगी।

अल्पाइन जेएस एक हल्का जावास्क्रिप्ट फ्रेमवर्क है जिसका उपयोग हम रिएक्ट या वीयू जैसे फ्रेमवर्क का उपयोग किए बिना इंटरैक्टिव वेबसाइट बनाने के लिए कर सकते हैं। अल्पाइन जेएस का उपयोग करते समय हम जावास्क्रिप्ट गुणों को अलग से लिखने की आवश्यकता के बिना सीधे HTML फ़ाइलों में आसानी से लागू कर सकते हैं।

कृपया index.html नाम से एक HTML फ़ाइल बनाएं, फिर निम्नलिखित कोड पेस्ट करें।

आगे हम टेलविंड सीएसएस का उपयोग करके एक कार्ड घटक बनाएंगे।

फिर हम डेटा लाएंगे और उसे कार्ड घटक पर प्रदर्शित करेंगे।

खुश! आपने अल्पाइन जेएस का उपयोग करके एपीआई को सफलतापूर्वक प्राप्त कर लिया है और इसे उपयोगकर्ता को प्रदर्शित किया है, यहां परिणाम हैं।

निम्नलिखित बनाए गए कोड का स्पष्टीकरण है।

x-data HTML टैग पर सीधे चलने के लिए जावास्क्रिप्ट डेटा लॉजिक को समायोजित करने का कार्य करता है। इस कोड में हम एक वेरिएबल बनाते हैं जिसे टीम्स कहा जाता है जिसमें डेटा टाइप ऐरे होता है। इस वेरिएबल का उद्देश्य फ़ंक्शन में परिणाम लाने से डेटा को रोकना है।

x-init का लक्ष्य घटक लोड होने से पहले आरंभीकरण करना है। इस कोड में, हम एक फ़ेच फ़ंक्शन सम्मिलित करते हैं जिसका उद्देश्य एपीआई एंडपॉइंट से डेटा पुनर्प्राप्त करना है जिसे हमने पहले तैयार किया है। फिर ब्राउज़र पेज प्रदर्शित होने से पहले, अल्पाइन जेएस पर्दे के पीछे एक फ़ेचिंग प्रक्रिया को अंजाम देगा और फिर फ़ेचिंग के परिणाम टीम वेरिएबल में एकत्र किए जाएंगे जो शुरुआत में घोषित किए गए थे।

x-for का उपयोग टीमों वेरिएबल की पुनरावृत्तीय प्रक्रिया को पूरा करने और फिर इसे टीम वेरिएबल में वापस डालने के लिए किया जाता है।

x-bind छवियों को प्रदर्शित करने के लिए और x-text डेटा को सीधे HTML डिस्प्ले में प्रिंट करने के लिए।