disponible. keywords: docType:Blog,category:Baseline2025,language:JavaScript
Fecha de publicación: 18 de junio de 2025
Si quieres importar un archivo JSON en un módulo de JavaScript, antes debías realizar algunos pasos, como incorporar JSON en JavaScript solo para poder usar una sentencia import normal o descargar un archivo con fetch() y, luego, llamar a Response.json(). Este es un problema que ahora se resuelve en todos los navegadores modernos gracias a las secuencias de comandos de módulos JSON y a los atributos de importación.
En el siguiente ejemplo, se muestra cómo se puede importar una secuencia de comandos de módulo JSON desde una secuencia de comandos de módulo de 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 });
No se necesita JSON.parse(), el JSON se analiza y está listo para usarse justo después de import. Esto funciona porque el navegador sabe de antemano que está tratando con JSON, que declaras con el atributo de importación with { type: "json"
}.
Consulta esta demo en vivo de importaciones de módulos JSON que usa el código de la ficha anterior.
La verificación del tipo de MIME para las secuencias de comandos de módulo es estricta. Para que la recuperación de la secuencia de comandos del módulo JSON se realice correctamente, la respuesta HTTP debe tener un tipo MIME de JSON, por ejemplo, Content-Type: text/json.
Si se omite la parte with { type: "json" } de la sentencia, el navegador asume que el intent es importar una secuencia de comandos de módulo de JavaScript, y la recuperación fallará si la respuesta HTTP tiene un tipo MIME que no es un tipo MIME de JavaScript.
Puedes leer más sobre el procesamiento de secuencias de comandos de módulos JSON en las especificaciones de HTML.