Skip to content

Instantly share code, notes, and snippets.

@w3collective
Created August 12, 2021 00:16
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save w3collective/ce395693217ded92f99f13ceea1e9187 to your computer and use it in GitHub Desktop.
Save w3collective/ce395693217ded92f99f13ceea1e9187 to your computer and use it in GitHub Desktop.
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
Copy link
Author

w3collective commented Jul 3, 2022

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