Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Displaying API data in a HTML table with Alpine.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Alpine.js: Displaying API data in a HTML table</title>
<style>
[x-cloak] {
display: none !important;
}
td,
th {
border: 1px solid #ccc;
padding: 5px 15px 5px 5px;
text-align: left;
}
</style>
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>
<body>
<div
x-cloak
x-data="{teams: [], '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 => { teams = response.teams; isLoading = false; console.log(response.teams);})"
>
<h1 x-show="isLoading">Loading...</h1>
<table x-show="!isLoading">
<tr>
<th>Team</th>
<th>Founded</th>
<th>Stadium</th>
<th>Capacity</th>
</tr>
<template x-for="team in teams" :key="team.idTeam">
<tr>
<td x-text="team.strTeam"></td>
<td x-text="team.intFormedYear"></td>
<td x-text="team.strStadium"></td>
<td x-text="team.intStadiumCapacity"></td>
</tr>
</template>
</table>
</div>
</body>
</html>
@w3collective

This comment has been minimized.

Copy link
Owner Author

@w3collective w3collective commented Aug 12, 2021

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment