How To Import A JSON File In JavaScript (ES6 Modules)

Posted on by Tom Joseph
How to import a JSON file in JavaScript (ES6 Modules)

In this article, I will show you several ways to import a JSON file in JavaScript (ES6 Modules), so follow this article carefully. Then you’ll figure out the fastest and most efficient way to get it done.

Import A JSON File In JavaScript (ES6 Modules)

Method 1: Static Import

To static Import, we must first set the type attribute of the script tag as a module. Because in this article I use the ES6 Modules syntax.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>import a JSON file in JavaScript (ES6 Modules)</title>
  </head>
  <body>
<!-- Set type attribute of the script tag is 'module' -->
    <script type="module" src="main.js"></script>
  </body>
</html>

The New Import Assertions feature allows you to include additional information in your module’s import statements and the module identifier. The first use of this function is to allow a JSON document to be imported as a JSON module.

Example:

import myJson from './jsonExample.json' assert {type : 'json'}

In the example, if we see assert {type: ‘json’}, it helps our program understand that I am importing a JSON. If we don’t pass this command, our program will get a Failed to load module script error because the program doesn’t know if we are importing a JSON file or not.

Method 2: Dynamic Import

Just like when Static Import, we also need to set the type attribute of the script tag as a module (in this article, I use the ES6 Modules syntax).

After we set the type attribute of the script tag, the module builds a function to import and load the json file using the async function.

Syntax:

async function name(param0, param1, /* … ,*/ paramN) {
  statements
}

Parameters:

  • name: Is the function name
  • param: Is the parameter passed to the function
  • statements: Is the executable code, can use await

Example:

async function loadJSON(){

  // import file JSON
  const { default: myJon2 } = await import('./jsonExample.json', {
        assert: {
          type: 'json'
        }
    });

  // show data in file JSON
  console.log(myJon2);
}

loadJSON();

You can test the above two methods with the below code.

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
      <title>import a JSON file in JavaScript (ES6 Modules)</title>
  </head>
  <body>
<!-- Set type attribute of the script tag is 'module' -->
    <script type="module" src="main.js"></script>
  </body>
</html>

main.js

// static Import
import myJson from './jsonExample.json' assert {type: 'json'};

// show data in file JSON
console.log('myJson: '+ myJson)

// dynamic Import
async function loadJSON(){

  // import file JSON
    const { default: myJon2 } = await import('./jsonExample.json', {
        assert: {
          type: 'json'
        }
    });

    // show data in file JSON
      console.log('myJson2: ' + myJon2);
}
loadJSON();

jsonExample.json

"This is a string in jsonExample"

Output:

myJson: This is a string in jsonExample
myJson2: This is a string in jsonExample

Summary

Above are the steps and examples to import a JSON file in JavaScript (ES6 Modules). You should follow carefully and slowly follow the above steps. I hope it helps you and your program. Thanks for reading!

Maybe you are interested:

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *