LU03.L02

Dies ist eine alte Version des Dokuments!

app.js

<!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>

index.html

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Node.js Server Nachricht</title>
</head>
<body>
 
    <h1>Antwort vom Server:</h1>
 
    <p>{SERVER_MSG}}<</p>
 
</body>
</html>

Volkan Demir