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:
- Get the Status Code of an Axios HTTP Error in JavaScript
- Import a JavaScript file into a TypeScript file
- Import Functions from another file using JavaScript

My name is Tom Joseph, and I work as a software engineer. I enjoy programming and passing on my experience. C, C++, JAVA, and Python are my strong programming languages that I can share with everyone. In addition, I have also developed projects using Javascript, html, css.
Job: Developer
Name of the university: UTC
Programming Languages: C, C++, Javascript, JAVA, python, html, css