HTML Template mit JSON

Aufgabe: HTML Template mit JSON Daten¶

Datum: 17.02.2026
Thema: HTML Templating mit Daten aus einer data.json

Ziel¶

Ich erstelle ein kleines HTML-Template, lade Daten aus einer data.json per JavaScript rein und zeige den Produktnamen, das Bild (Emoji) und den Preis auf einer Webseite an.
Die Lösung wird auf dem Raspberry Pi Server abgelegt und hier in meiner Doku dokumentiert.

Projektstruktur¶

Für diese Aufgabe habe ich im Repo folgenden Ordner angelegt:

projects/html-json-template/
index.html – HTML-Seite mit einem <template> für ein Produkt
index.js – JavaScript, das data.json lädt und das Template füllt
data.json – die Produktdaten (so wie in der Aufgabe vorgegeben)

Inhalt von `data.json`¶

Diese Datei liegt im Ordner projects/html-json-template/ und enthält genau die vorgegebenen Daten:

[
  {
    "id": 0,
    "productName": "Fresh Avocados",
    "image": "🥑",
    "from": "Spain",
    "nutrients": "Vitamin B, Vitamin K",
    "quantity": "4 🥑",
    "price": "6.50",
    "organic": true,
    "description": "A ripe avocado yields to gentle pressure when held in the palm of the hand and squeezed. The fruit is not sweet, but distinctly and subtly flavored, with smooth texture. The avocado is popular in vegetarian cuisine as a substitute for meats in sandwiches and salads because of its high fat content. Generally, avocado is served raw, though some cultivars, including the common 'Hass', can be cooked for a short time without becoming bitter. It is used as the base for the Mexican dip known as guacamole, as well as a spread on corn tortillas or toast, served with spices."
  },
  {
    "id": 1,
    "productName": "Goat and Sheep Cheese",
    "image": "🧀",
    "from": "Portugal",
    "nutrients": "Vitamin A, Calcium",
    "quantity": "250g",
    "price": "5.00",
    "organic": false,
    "description": "Creamy and distinct in flavor, goat cheese is a dairy product enjoyed around the world. Goat cheese comes in a wide variety of flavors and textures, from soft and spreadable fresh cheese to salty, crumbly aged cheese. Although it’s made using the same coagulation and separation process as cheese made from cow’s milk, goat cheese differs in nutrient content."
  }
]

HTML Template (`index.html`)¶

Die HTML-Datei ist sehr klein gehalten. Wichtig ist:

ein <template> mit der ID product-template
ein Container <section id="product-list">, in den die Produkte gerendert werden
das Script index.js, das am Ende eingebunden wird

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8" />
    <title>HTML Template mit JSON Daten</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  </head>
  <body>
    <h1>Produkte aus JSON (HTML Templating)</h1>

    <!-- Template für ein Produkt -->
    <template id="product-template">
      <article class="product">
        <div class="product-image"></div>
        <h2 class="product-name"></h2>
        <p class="product-price"></p>
      </article>
    </template>

    <!-- Hier kommen die gerenderten Produkte rein -->
    <section id="product-list"></section>

    <!-- JavaScript lädt data.json und füllt das Template -->
    <script src="./index.js" type="module"></script>
  </body>
</html>

JavaScript: Daten laden und Template füllen (`index.js`)¶

In index.js passiert das eigentliche Templating:

fetch("./data.json") lädt die JSON-Datei
für jedes Produkt wird das Template geklont
productName, image und price werden ins HTML eingesetzt

// index.js
// Lädt die Daten aus data.json und rendert sie mit einem HTML-Template

// Warten bis das HTML geladen ist
document.addEventListener("DOMContentLoaded", async () => {
  // Referenzen auf Template und Container
  const template = document.getElementById("product-template");
  const list = document.getElementById("product-list");

  try {
    // JSON-Datei laden (liegt im gleichen Ordner wie index.html)
    const response = await fetch("./data.json");
    if (!response.ok) {
      throw new Error("Konnte data.json nicht laden");
    }

    const products = await response.json();

    // Für jedes Produkt das Template klonen und mit Daten füllen
    products.forEach((product) => {
      // Template-Inhalt klonen
      const clone = template.content.cloneNode(true);

      // Elemente im Template suchen
      const imageEl = clone.querySelector(".product-image");
      const nameEl = clone.querySelector(".product-name");
      const priceEl = clone.querySelector(".product-price");

      // Werte aus JSON einsetzen
      imageEl.textContent = product.image;
      nameEl.textContent = product.productName;
      priceEl.textContent = `${product.price} CHF`;

      // In die Liste einfügen
      list.appendChild(clone);
    });
  } catch (err) {
    console.error(err);
    list.textContent = "Fehler beim Laden der Produkte.";
  }
});

Lokales Testen auf meinem Laptop¶

Weil fetch über file:// meistens geblockt wird, teste ich die Seite mit einem kleinen lokalen Webserver.

Variante mit Python (wenn installiert):

Im Projektordner ins Verzeichnis gehen:

cd "C:\Users\joelm\OneDrive - Kt. SG BLD\2. Schuljahr\1. Semester\Module\V293\meine-dokumentation\projects\html-json-template"

Webserver starten:
```
python -m http.server 8080
```
Im Browser öffnen:
```
http://localhost:8080
```

Was ich kontrolliere / Screenshot-Idee:

Seite im Browser öffnen
Es sollten zwei Produkte angezeigt werden:
🥑 Fresh Avocados mit Preis 6.50 CHF
🧀 Goat and Sheep Cheese mit Preis 5.00 CHF
Screenshot der Seite für die Abgabe machen (muss ich selber machen).

Deployment auf den Raspberry Pi¶

Gegebene Daten des Setups:

Host-IP (Raspberry Pi): 10.27.160.12
SSH-Benutzer: m295
Passwort: m295
Arbeitsverzeichnis: /home/m295/class/joel
Host-Port extern: 4011
Interner Docker-Port: 3000
URL im Schulnetz: http://10.27.160.12:4011
Start/Stop-Skripte: ./start.sh, ./stop.sh

1. Dateien vom Laptop auf den Raspi kopieren (mache ich selbst)¶

Im PowerShell / Terminal auf meinem Laptop:

cd "C:\Users\joelm\OneDrive - Kt. SG BLD\2. Schuljahr\1. Semester\Module\V293\meine-dokumentation\projects\html-json-template"

scp index.html index.js data.json m295@10.27.160.12:/home/m295/class/joel/html-json-template/

Hinweis: Falls der Ordner html-json-template auf dem Raspi noch nicht existiert, kann ich ihn nach dem Einloggen mit mkdir html-json-template anlegen.

2. Auf den Raspi einloggen (mache ich selbst)¶

ssh m295@10.27.160.12

Dann:

cd /home/m295/class/joel/html-json-template

3. Einfacher Webserver auf dem Raspi¶

Für die Aufgabe reicht ein einfacher statischer Webserver, z.B. mit Python:

python3 -m http.server 3000

Wenn bereits Docker / Node auf Port 3000 läuft, muss ich zuerst mein bestehendes Setup stoppen oder einen anderen Port wählen.

Alternative: Wenn ein bestehendes Docker-Setup läuft, kann auch weiterhin ./start.sh / ./stop.sh verwendet werden und die Dateien in das entsprechende Webroot-Verzeichnis gelegt werden (abhängig von der bestehenden Konfiguration).

4. Seite im Schulnetz aufrufen¶

Im Schulnetz-Browser:

http://10.27.160.12:4011

oder, falls ich direkt auf Port 3000 ohne Docker gehe (je nach Setup des Lehrers):

http://10.27.160.12:3000

Kontrolle / Screenshot (mache ich selbst):

Prüfen, ob die Produkte wie lokal angezeigt werden
Screenshot der Raspberry-Pi-URL mit der Produktliste für die Abgabe machen

Git: Änderung in meine Doku pushen¶

Damit die Aufgabe in meiner Dokumentation landet, führe ich lokal im Projekt-Root (meine-dokumentation) folgende Schritte aus:

cd "C:\Users\joelm\OneDrive - Kt. SG BLD\2. Schuljahr\1. Semester\Module\V293\meine-dokumentation"

git add docs/html-json-template-aufgabe.md projects/html-json-template/index.html projects/html-json-template/index.js projects/html-json-template/data.json

git commit -m "Aufgabe HTML Template mit JSON Daten umgesetzt und dokumentiert"

git push

Fazit¶

Ich habe gelernt, wie man Daten aus einer data.json mit fetch lädt.
Mit <template> und cloneNode(true) kann ich HTML-Strukturen wiederverwenden und mit JSON-Daten füllen (HTML Templating).
Die Lösung läuft lokal auf meinem Laptop und kann auch auf dem Raspberry Pi im Schulnetz ausgeliefert werden.