DEV Community

Cover image for Fetching Data Dengan Alpine JS
Muhammad Mahib Arib
Muhammad Mahib Arib

Posted on

1

Fetching Data Dengan Alpine JS

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>

Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Selamat! Anda berhasil melakukan fetching API dengan menggunakan Alpine JS dan menampilkannya kepada pengguna, berikut ini adalah hasilnya.

Image description

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.

API Trace View

How I Cut 22.3 Seconds Off an API Call with Sentry đź•’

Struggling with slow API calls? Dan Mindru walks through how he used Sentry's new Trace View feature to shave off 22.3 seconds from an API call.

Get a practical walkthrough of how to identify bottlenecks, split tasks into multiple parallel tasks, identify slow AI model calls, and more.

Read more →

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

đź‘‹ Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay