How to import a JSON file in JavaScript (ES6 Modules)

avatar

Borislav Hadzhiev

Last updated: Aug 10, 2022

banner

Photo from Unsplash

Table of Contents #

  1. Import a JSON file in the Browser
  2. Import a JSON file in Node.js

Import a JSON file in the Browser #

To import a JSON file in JavaScript:

  1. Make sure the type attribute on the script tag is set to module.
  2. Use an import assertion to import the JSON file.
  3. For example, import myJson from './example.json' assert {type: 'json'}.

Here is my index.html file that has a script tag pointing to an index.js module.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <div id="box">Hello world</div> <!-- 👇️ type set to module --> <script type="module" src="index.js"></script> </body> </html>

Make sure the type attribute is set to module because we are using the ES6 Modules syntax.

And here is how we would import a JSON file in our index.js file.

index.js
import myJson from './example.json' assert {type: 'json'}; // 👇️ { // name: 'Alice', // country: 'Austria', // tasks: [ 'develop', 'design', 'test' ], // age: 30 // } console.log(myJson.person); console.log(myJson.person.name); // 👉️ "Alice" console.log(myJson.person.country); // 👉️ "Austria"

The code snippet assumes that there is an example.json file located in the same directory.

example.json
{ "person": { "name": "Alice", "country": "Austria", "tasks": ["develop", "design", "test"], "age": 30 } }

If I open the Console tab in my Developer tools, I can see that the JSON file has been imported successfully.

browser-json-import.webp

You can read more about why this is necessary in the Import assertions proposal page on GitHub.

In short, the import assertion proposal adds an inline syntax for module import statements.

The syntax was introduced for improved security when importing JSON modules and similar module types which cannot execute code.

This helps us avoid a scenario where a server responds with a different MIME type, causing code to be unexpectedly executed.

The assert {type: 'json'} syntax enables us to specify that we are importing a JSON or similar module type that isn't going to be executed.

If I remove the assert {type: 'json'} syntax from the import statement, I'd get an error.

index.js
// ⛔️ Error: Failed to load module script: Expected a JavaScript module script // but the server responded with a MIME type of "application/json". // Strict MIME type checking is enforced for module scripts per HTML spec. import myJson from './example.json';

failed to load module script

You can read more about the import assertions proposal in this tc39 GitHub repository.

Import a JSON file in Node.js #

To import a JSON file in Node.js:

  1. Make sure you are running Node.js version 17.5 or more recent.
  2. Make sure the type property in your package.json file is set to module.
  3. Use an import assertion to import the JSON file.
  4. For example, import myJson from './example.json' assert {type: 'json'}.
Make sure your Node.js version is at least 17.5 because import assertions are valid syntax starting version 17.5.

The type property in your package.json has to be set to module.

package.json
{ "type": "module", // ... rest }

Now we can import a JSON file using an import assertion.

index.js
import myJson from './example.json' assert {type: 'json'}; // 👇️ { // name: 'Alice', // country: 'Austria', // tasks: [ 'develop', 'design', 'test' ], // age: 30 // } console.log(myJson.person); console.log(myJson.person.name); // 👉️ "Alice" console.log(myJson.person.country); // 👉️ "Austria"

The code snippet above assumes that there is an example.json file located in the same directory.

example.json
{ "person": { "name": "Alice", "country": "Austria", "tasks": ["develop", "design", "test"], "age": 30 } }

Here is the output from running the index.js file.

node import json

You can read more about the assert syntax on the Import assertions proposal page.

The import assertion proposal adds an inline syntax for module import statements.

The syntax was introduced for improved security when importing JSON modules and similar module types which cannot execute code.

This helps us avoid a scenario where a server responds with a different MIME type, causing code to be unexpectedly executed.

The assert {type: 'json'} syntax enables us to specify that we are importing a JSON or similar module type that isn't going to be executed.

If I remove the assert {type: 'json'} syntax from the import statement, I'd get an error.

index.js
// ⛔️ TypeError [ERR_IMPORT_ASSERTION_TYPE_MISSING]: // Module "/bobbyhadz-js/example.json" needs an // import assertion of type "json" import myJson from './example.json';

err import assertion type missing

You can read more about the import assertions proposal in this tc39 GitHub repository.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.