Kali ini kita akan belajar fetching data dari API dengan menggunakan Alpine JS. Kita akan buat website yang menampilkan daftar klub sepak bola yang bermain di Liga Premier Inggris yang diambil dari API berikut.
Alpine JS merupakan sebuah lightweight framework Javascript yang dapat kita manfaatkan untuk membuat sebuah interaktif website tanpa harus menggunakan framework seperti React atau Vue. Ketika menggunakan Alpine JS kita dapat dengan mudah langsung menerapkan sifat Javascript ke dalam file HTML tanpa perlu menuliskannya secara terpisah.
Silahkan buat file HTML dengan nama index.html, kemudian sisipkan kode berikut.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Latihan Alpine JS</title>
<!-- Import Alpine JS -->
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<!-- Import Tailwind -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet"/>
<style>
* {
font-family: "Roboto", sans-serif;
}
</style>
</head>
<body>
</body>
</html>
Selanjutnya kita akan membuat komponen card menggunakan Tailwind CSS.
<div class="container px-4 py-12 mx-auto">
<div class="flex flex-wrap">
<div class="lg:w-1/4 md:w-1/2 p-4 w-full">
<img alt="logo" class="object-cover h-56 mx-auto" src="" />
<div class="mt-4">
<h2 class="text-gray-500 text-xs tracking-widest mb-1"></h2>
<h1 class="text-gray-900 text-xl font-medium"></h1>
</div>
</div>
</div>
</div>
Kemudian kita akan melakukan fetching data dan menampilkannya pada komponen card.
<div class="flex flex-wrap" x-data="{ teams: [] }" x-init="fetch('https://www.thesportsdb.com/api/v1/json/3/search_all_teams.php?l=English%20Premier%20League').then(response => response.json()).then(data => { teams = data.teams })">
<template x-for="team in teams">
<div class="lg:w-1/4 md:w-1/2 p-4 w-full">
<img x-bind:alt="team.idTeam" class="object-cover h-56 mx-auto" x-bind:src="team.strBadge" />
<div class="mt-4">
<h2 class="text-gray-500 text-xs tracking-widest mb-1" x-text="team.strLocation"></h2>
<h1 class="text-gray-900 text-xl font-medium" x-text="team.strTeam"></h1>
</div>
</div>
</template>
</div>
Selamat! Anda berhasil melakukan fetching API dengan menggunakan Alpine JS dan menampilkannya kepada pengguna, berikut ini adalah hasilnya.
Berikut ini penjelasan dari kode yang dibuat.
x-data berfungsi untuk menampung data logic Javascript agar berjalan langsung pada tag HTML tersebut. Pada kode tersebut kita membuat satu variabel dengan nama teams yang bertipe data array. Variabel ini bertujuan untuk menampung data hasil fetching pada fungsi tersebut.
x-init bertujuan untuk melakukan inisialisasi sebelum komponen tersebut di load. Pada kode tersebut kita menyisipkan fungsi fetch yang bertujuan untuk mengambil data dari endpoint API yang sudah kita siapkan sebelumnya. Kemudian sebelum halaman browser ditampilkan, Alpine JS akan melakukan proses fetching di belakang layar kemudian hasil dari fetching tersebut ditampung kedalam variabel teams yang sudah dideklarasikan di awal.
x-for digunakan untuk melakukan proses perulangan dari variabel teams kemudian ditampung kembali dalam variabel team.
x-bind untuk menampilkan gambar dan x-text untuk mencetak langsung data kedalam tampilan HTML.
Top comments (0)