Um eine einfache HTML-Anwendung zu erstellen, die die Fetch API verwendet, um JSON-Daten abzurufen und Adressdaten anzuzeigen, können Sie die folgenden Schritte ausführen:

  1. Erstellen Sie eine HTML-Datei (z.B. index.html) mit dem folgenden Grundgerüst:

<!DOCTYPE html>
<html lang=”de”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Fetch API Beispiel</title>
</head>
<body>
<h1>Adressdaten</h1>
<div id=”adresse”></div>

<script src=”app.js”></script>
</body>
</html>

2. Erstellen Sie eine JavaScript-Datei (z.B. app.js) im selben Verzeichnis wie Ihre HTML-Datei und fügen Sie den folgenden Code ein:

// Die URL der JSON-Datei, die die Adressdaten enthält
const url = ‘https://example.com/adressdaten.json’;

// Die fetch-Funktion, um die JSON-Datei abzurufen
fetch(url)
.then(response => {
if (response.ok) {
return response.json();
} else {
throw new Error(‘Fehler beim Laden der Daten: ‘ + response.statusText);
}
})
.then(data => renderAdresse(data))
.catch(error => console.error(‘Fehler beim Abrufen der Adressdaten:’, error));

// Funktion zum Rendern der Adressdaten
function renderAdresse(adresse) {
const adresseDiv = document.getElementById(‘adresse’);

const strasse = document.createElement(‘p’);
strasse.textContent = `Straße: ${adresse.strasse}`;

const hausnummer = document.createElement(‘p’);
hausnummer.textContent = `Hausnummer: ${adresse.hausnummer}`;

const plz = document.createElement(‘p’);
plz.textContent = `PLZ: ${adresse.plz}`;

const stadt = document.createElement(‘p’);
stadt.textContent = `Stadt: ${adresse.stadt}`;

adresseDiv.appendChild(strasse);
adresseDiv.appendChild(hausnummer);
adresseDiv.appendChild(plz);
adresseDiv.appendChild(stadt);
}

  1. In diesem Beispiel wird die JSON-Datei (z.B. adressdaten.json) mit den Adressdaten von https://example.com/adressdaten.json abgerufen. Sie sollten diese URL durch die tatsächliche URL der JSON-Datei ersetzen, die Sie verwenden möchten. Die JSON-Datei sollte so aussehen:
{
"strasse": "Musterstraße",
"hausnummer": "12",
"plz": "12345",
"stadt": "Musterstadt"
}
  1. Öffnen Sie die index.html-Datei in einem Webbrowser, um die Anwendung auszuführen und die Adressdaten anzuzeigen.

Denken Sie daran, dass Sie möglicherweise CORS-Einstellungen (Cross-Origin Resource Sharing) konfigurieren müssen, wenn Sie die JSON-Datei von einem anderen Server abrufen.