Fetching Data With Alpine JS-JS Tutorial-php.cn

Fetching Data With Alpine JS

王林

Release： 2024-07-19 14:38:47

Original

950 people have browsed it

This time we will learn fetching data from API using Alpine JS. We will create a website that displays a list of football clubs playing in the English Premier League taken from the following API.

Alpine JS is a lightweight Javascript framework that we can use to create interactive websites without having to use frameworks like React or Vue. When using Alpine JS we can easily apply Javascript properties directly to HTML files without needing to write them separately.

Please create an HTML file with the name index.html, then paste the following code.

<!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>

Copy after login

Next we will create a card component using 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>

Copy after login

Then we will fetch the data and display it on the card component.

<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>

Copy after login

Congratulations! You have successfully fetched the API using Alpine JS and displayed it to the user, here are the results.

Image description

The following is an explanation of the code created.

x-data functions to accommodate Javascript data logic so that it runs directly on the HTML tag. In this code, we create a variable called teams which has the data type array. This variable aims to hold data from fetching results in the function.

x-init aims to perform initialization before the component is loaded. In this code, we insert a fetch function which aims to retrieve data from the API endpoint that we have prepared previously. Then before the browser page is displayed, Alpine JS will carry out a fetching process behind the scenes and then the results of the fetching are collected into the teams variable that was declared at the beginning.

x-for is used to carry out the iterative process of the teams variable and then put it back in the team variable.

x-bind to display images and x-text to print data directly into the HTML display.

The above is the detailed content of Fetching Data With Alpine JS. For more information, please follow other related articles on the PHP Chinese website!