LU03.L03

app.js

const express = require('express');
const app = express();
const path = require('path');
 
// Die Daten der drei (jetzt vier) Personen
const personen = [
    { id: 1, name: "Max Mustermann", alter: 28, beruf: "Entwickler" },
    { id: 2, name: "Anna Schmidt", alter: 34, beruf: "Designerin" },
    { id: 3, name: "Ben Weber", alter: 22, beruf: "Student" },
    { id: 4, name: "Peter König", alter: 25, beruf: "Betonbauer" } // ID von 3 auf 4 korrigiert
];
 
// FEHLENDE CODEZEILE 1: Den aktuellen Ordner für statische Dateien (wie index.html) freigeben
app.use(express.static(__dirname));
 
// FEHLENDE CODEZEILE 2: Route für die Startseite (liefert die index.html aus)
app.get('/', (req, res) => {
    res.sendFile(path.join(__dirname, 'index.html'));
});
 
// FEHLENDE CODEZEILE 3: Route für die JSON-Daten (falls du die Daten per fetch abrufen willst)
app.get('/api/personen', (req, res) => {
    res.json(personen);
});
 
// Server auf Port 3000 starten
const PORT = 3000;
app.listen(PORT, () => {
    console.log(`Server läuft unter http://localhost:${PORT}`);
});

index.html

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Personen Übersicht</title>
    <style>
        table { width: 50%; border-collapse: collapse; margin-top: 20px; }
        th, td { border: 1px solid #999; padding: 8px; text-align: left; }
        th { background-color: #f2f2f2; }
    </style>
</head>
<body>
 
    <h1>Personenliste</h1>
 
    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Alter</th>
                <th>Beruf</th>
            </tr>
        </thead>
        <!-- Hier landen die Daten dynamisch -->
        <tbody id="tabellen-body"></tbody>
    </table>
 
    <script>
        // Daten vom Server abrufen
        fetch('/api/personen')
            .then(response => response.json()) // Antwort in JSON umwandeln
            .then(daten => {
                const tbody = document.getElementById('tabellen-body');
 
                // Schleife durch alle Personen
                daten.forEach(person => {
                    // Eine neue Tabellenzeile erstellen
                    const zeile = document.createElement('tr');
 
                    // Zellen mit den Daten füllen
                    zeile.innerHTML = `
                        <td>${person.id}</td>
                        <td>${person.name}</td>
                        <td>${person.alter}</td>
                        <td>${person.beruf}</td>
                    `;
 
                    // Zeile an die Tabelle anhängen
                    tbody.appendChild(zeile);
                });
            })
            .catch(error => console.error('Fehler beim Laden der Daten:', error));
    </script>
 
</body>
</html>

Volkan Demir