verfügbar. keywords: docType:Blog,category:Baseline2025,language:JavaScript
Veröffentlicht: 18. Juni 2025
Wenn Sie eine JSON-Datei in ein JavaScript-Modul importieren wollten, mussten Sie bisher JSON in JavaScript einbetten, um eine reguläre import-Anweisung verwenden zu können, oder eine Datei mit fetch() herunterladen und dann Response.json() aufrufen. Dieses Problem wird jetzt in allen modernen Browsern dank JSON-Modulscripts und Importattributen gelöst.
Das folgende Beispiel zeigt, wie ein JSON-Modulscript aus einem JavaScript-Modulscript importiert werden kann:
import astronomyPictureOfTheDay from "./apod.json" with { type: "json" };
const {explanation, title, url} = astronomyPictureOfTheDay;
document.querySelector('h2').textContent = title;
document.querySelector('figcaption').textContent = explanation;
Object.assign(document.querySelector('img'), { src: url, alt: title });
JSON.parse() ist nicht erforderlich. Die JSON-Datei wird direkt nach import geparst und ist einsatzbereit. Das funktioniert, weil der Browser bereits weiß, dass es sich um JSON handelt, was Sie mit dem Importattribut with { type: "json"
} angeben.
Sehen Sie sich diese Live-Demo des JSON-Modulimports an, in der der Code aus dem vorherigen Listeneintrag verwendet wird.
Die MIME-Typ-Überprüfung für Modulscripts ist streng. Damit das JSON-Modul-Script abgerufen werden kann, muss die HTTP-Antwort einen JSON-MIME-Typ haben, z. B. Content-Type: text/json.
Wenn der Teil with { type: "json" } der Anweisung weggelassen wird, geht der Browser davon aus, dass ein JavaScript-Modulscript importiert werden soll. Der Abruf schlägt fehl, wenn die HTTP-Antwort einen MIME-Typ hat, der kein JavaScript-MIME-Typ ist.
Weitere Informationen zur Verarbeitung von JSON-Modulscripts finden Sie in der HTML-Spezifikation.