Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Displaying API data in a HTML table with Alpine.js
<!DOCTYPE html>
<html lang="en">
<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>
[x-cloak] {
display: none !important;
th {
border: 1px solid #ccc;
padding: 5px 15px 5px 5px;
text-align: left;
<script defer src=""></script>
x-data="{teams: [], 'isLoading': true}"
.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">
<template x-for="team in teams" :key="team.idTeam">
<td x-text="team.strTeam"></td>
<td x-text="team.intFormedYear"></td>
<td x-text="team.strStadium"></td>
<td x-text="team.intStadiumCapacity"></td>

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