This time we will learn fetching data from the API using Alpine JS. We will create a website that displays a list of football clubs that play 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 such as React or Vue. When using Alpine JS we can easily apply Javascript properties directly into HTML files without needing to write them separately.

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

Next we will create a card component using Tailwind CSS.

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

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

The following is an explanation of the code created.

x-data functions to accommodate Javascript data logic to run 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.