Skrip modul JSON kini tersedia di Dasar Pengukuran

tersedia. keywords: docType:Blog,category:Baseline2025,language:JavaScript

Thomas Steiner

Dipublikasikan: 18 Juni 2025

Jika ingin mengimpor file JSON dalam modul JavaScript, sebelumnya Anda harus melakukan berbagai hal seperti menyematkan JSON di JavaScript agar dapat menggunakan pernyataan import reguler, atau mendownload file dengan fetch(), lalu memanggil Response.json(). Ini adalah masalah yang kini telah dipecahkan di semua browser modern berkat skrip modul JSON dan atribut impor.

Contoh berikut menunjukkan cara skrip modul JSON dapat diimpor dari dalam skrip modul JavaScript:

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 });

Tidak diperlukan JSON.parse(), JSON diuraikan dan siap digunakan tepat setelah import. Hal ini berfungsi karena browser mengetahui sebelumnya bahwa browser menangani JSON, yang Anda deklarasikan dengan atribut impor with { type: "json" }.

Lihat demo langsung impor modul JSON ini yang menggunakan kode dari listingan sebelumnya.

Pemeriksaan jenis MIME untuk skrip modul bersifat ketat. Agar pengambilan skrip modul JSON berhasil, respons HTTP harus memiliki jenis MIME JSON, misalnya Content-Type: text/json.

Jika bagian with { type: "json" } dari pernyataan dihilangkan, browser akan mengasumsikan bahwa intent-nya adalah untuk mengimpor skrip modul JavaScript, dan pengambilan akan gagal jika respons HTTP memiliki jenis MIME yang bukan jenis MIME JavaScript.

Anda dapat membaca lebih lanjut pemrosesan skrip modul JSON dalam spesifikasi HTML.