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>
Copy link

w3collective commented Aug 12, 2021

Copy link

johntom commented Jun 30, 2022

Id like to display an image in column. The following text column works
td x-text=${image.Filename}>
I haven't figured out how to display an image in a coulmn with alpine
<img class="responsive-img" src=${image.Filename}> TIA John tr tt timage lin /th th image /th /tr template x-for="image in images" :key="" tr td x-text="${image.Filename}> <img class="responsive-img" /td td x-text="image.Filename"><img src=${image.Filename}` /td

Copy link

w3collective commented Jul 3, 2022

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