JSFiddle - React, Tailwind, and code Playground
HTML
<!--Container für die zu generierende Tabelle -->
<div id='container'></div>
JavaScript
window.onload = function() {
// Die URL für die gewünschte API-Funktion: Die Bundesligatabelle 2023
// Andere URLs der API-Dokumentation entnehmen
let apiURL = 'https://api.openligadb.de/getbltable/bl1/2023/';
// Fetch ruft die API-Funktion auf
fetch(apiURL)
.then(response => response.json())
.then(data => {
// data enthält nun das vollständige JSON-Objekt für die Tabelle
// Array aus Team-Objekten. Schema der API-Doku entnehmen oder
// per F12 im Debugger des Browsers als console-output anschauen
console.log(data);
// Header für die Tabelle
var header = ['Position', 'Verein', 'Logo', 'Punkte'];
// Das container-Element wird geholt (siehe HTML-Code)
let container = document.getElementById("container");
// Elemente für die HTML-Tabelle werden erzeugt
let table = document.createElement("table");
let thead = document.createElement("thead");
let tr = document.createElement("tr");
// Header werden als <th> erzeugt und angehängt
header.forEach((item) => {
let th = document.createElement("th");
th.innerText = item;
tr.appendChild(th);
});
thead.appendChild(tr);
table.append(thead);
// data (=Tabellen-JSON) wird per for durchlaufen und bearbeitet
for (let i = 0; i < data.length; i++) {
let team = data[i]; // Das aktuelle Team in der Tabelle
let tr = document.createElement("tr"); // Row wird erzeugt
let td = document.createElement("td"); // Zelle wird erzeugt
td.innerText = i + 1; // Zelle 1 bekommt Inhalt (i+1=Position) ..
tr.appendChild(td); // .. und wird an Row angehängt
td = document.createElement("td"); // Neue Zelle
td.innerText = team.shortName; // Inhalt = Name
tr.appendChild(td); // Anhängen
td = document.createElement("td"); // Neue Zelle
let img = document.createElement("img"); // img-Element erzeugen
img.src...