Im Beispiel wird eine JSON-Datei eingelesen. Hierzu gibt es zwei Vorgehensweisen:
- Zuerst wird versucht die Datei per fetch() zu laden. Herbei kann es zum Fehler „Failed to fetch“ kommen. Die Fehlerursache ist häufig, dass der Browser den Zugriff auf lokale Dateien blockiert oder die Anfrage wegen einer Cross‑Origin‑Policy ablehnt.
- Falls fetch( ) fehlschlägt, kann per OpenDialog (FilePicker) lokal eine Datei ausgewählt werden.
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width,initial-scale=1" />
<title>JSON-Datei per URL oder lokal laden</title>
<style>
#filePicker {
margin: 8px 0;
}
</style>
</head>
<body>
<div id="container">
<div id="statusText">JSON-Datei laden</div>
<br />
<div
id="filePicker"
style="display: none">
<label>JSON-Datei auswählen:</label>
<input
type="file"
id="fileOpenDialog"
accept=".json" />
</div>
<br />
<div id="fileContentText">-</div>
</div>
<script>
// Datei mit Beispieldaten (URL)
//const JSON_SRC = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';
// Datei mit Beispieldaten (lokal)
const JSON_SRC = "MyLocalFile.json";
// Beispielhafte Weiterverarbeitung der JSON-Daten
function processJSON(json) {
if (json != null) {
document.getElementById("statusText").textContent =
"JSON-Datei wurde geladen und wird nun weiter verarbeitet.";
const text = JSON.stringify(json, null, 2);
document.getElementById("fileContentText").textContent = text;
}
}
document.addEventListener("DOMContentLoaded", () => {
const txtStatusText = document.getElementById("statusText");
// erst automatischer Ladevorgang per fetch( ) probieren,
// bei Fehler Fallback: manueller Datei-Upload
fetch(JSON_SRC)
.then((resp) => {
if (!resp.ok) throw new Error("HTTP " + resp.status);
// JSON zu Objekt parsen
return resp.json();
})
.then((json) => {
// ggf. statusText ausblenden
// txtStatusText.style.display = 'none';
// JSON verarbeiten
processJSON(json);
})
.catch((err) => {
txtStatusText.textContent =
"Fehler beim automatischen Laden: " + err.message;
// wenn Datei nicht per fetch( ) geladen werden kann,
// FilePicker anzeigen und dann manuelle Angabe der Datei
document.getElementById("filePicker").style.display = "block";
});
const fileInput = document.getElementById("fileOpenDialog");
// manueller Datei‑Upload
fileInput.addEventListener("change", (ev) => {
const f = ev.target.files && ev.target.files[0];
if (!f) return;
const reader = new FileReader();
reader.onload = function (e) {
try {
// JSON zu Objekt parsen
const json = JSON.parse(e.target.result);
// ggf. statusText ausblenden
//document.getElementById('statusText').style.display = 'none';
// JSON verarbeiten
processJSON(json);
} catch (ex) {
document.getElementById("statusText").textContent =
"Fehler: Ungültige JSON-Datei.";
}
};
reader.onerror = function () {
document.getElementById("statusText").textContent =
"Fehler beim Lesen der Datei.";
};
reader.readAsText(f);
});
});
</script>
</body>
</html>