Forked from w3collective/alpine-api-data-in-table.html
Created
March 15, 2023 18:33
-
-
Save pablojimeno/2927fd524357aa66b0be65c082d624d9 to your computer and use it in GitHub Desktop.
Displaying API data in a HTML table with Alpine.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment