This Banner is For Sale !!
Get your ad here for a week in 20$ only and get upto 15k traffic Daily!!!

Alpine.js: Displaying API data in a HTML table


On this tutorial we’ll be utilizing Alpine.js to load information from an API after which show that information in a HTML desk. We’ll be utilizing the free SportsDB API to load a listing of groups from the English Premier League together with some related crew information.

Let’s get began, for the needs of this tutorial you’ll be able to load Alpine through CDN:

<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
Enter fullscreen mode

Exit fullscreen mode

Now for the HTML markup beginning with a wrapper <div> for the part:

<div
    x-cloak
    x-data="{groups: [], 'isLoading': true}"
    x-init="fetch('https://www.thesportsdb.com/api/v1/json/1/lookup_all_teams.php?id=4328')
    .then(response => response.json())
    .then(response => { groups = response.groups; isLoading = false; console.log(response.groups); })"
>
<!-- Desk will go right here -->
</div>
Enter fullscreen mode

Exit fullscreen mode

x-cloak hides a component till Alpine has absolutely loaded, on this occasion it would forestall the flash of the desk header earlier than the x-show has evaluated and hidden the component. For the x-cloak attribute to work you will need to additionally embody the next CSS:

[x-cloak] {
  show: none !necessary;
}
Enter fullscreen mode

Exit fullscreen mode

x-data defines a bit of HTML as an Alpine part and offers the reactive information for that part to reference. On this case it’ll retailer the crew information in an array and the loading state of the part.

x-init is used to fetch the info and retailer it in x-data earlier than processing and rendering the part. The info itself is being fetched with the JavaScript fetch() methodology utilizing the SportsDB API endpoint for the English Premiere League groups.

If profitable you must the crew information logged within the browser console as follows:

Image description

We will now output this information right into a HTML desk:

<h1 x-show="isLoading">Loading...</h1>
<desk x-show="!isLoading">
    <tr>
        <th>Crew</th>
        <th>Based</th>
        <th>Stadium</th>
        <th>Capability</th>
    </tr>
    <template x-for="crew in groups" :key="crew.idTeam">
        <tr>
        <td x-text="crew.strTeam"></td>
        <td x-text="crew.intFormedYear"></td>
        <td x-text="crew.strStadium"></td>
        <td x-text="crew.intStadiumCapacity"></td>
        </tr>
    </template>
</desk>
Enter fullscreen mode

Exit fullscreen mode

x-show toggles the visibility of the <h1> loading textual content and the <desk> primarily based on the worth of isLoading. We then use the x-for directive to loop by means of every crew and output that information utilizing x-text into the person desk rows. The <template> component used here’s a mechanism for holding HTML that isn’t to be rendered instantly when a web page is loaded.

That’s all for this tutorial, in it we used 6 of the 15 directives out there in V3 of Alpine.js. In case your concerned with exploring the framework additional be sure you checkout a few of our different Alipine.js tutorials.

The Article was Inspired from tech community site.
Contact us if this is inspired from your article and we will give you credit for it for serving the community.

This Banner is For Sale !!
Get your ad here for a week in 20$ only and get upto 10k Tech related traffic daily !!!

Leave a Reply

Your email address will not be published. Required fields are marked *

Want to Contribute to us or want to have 15k+ Audience read your Article ? Or Just want to make a strong Backlink?