Read JSON File Using JavaScript
Last Updated :
03 May, 2025
JSON (JavaScript Object Notation) is a lightweight format used for storing and exchanging data. In JavaScript, there are multiple ways to read and parse JSON files. These methods can be used both in browser environments and in Node.js.
1. Using the fetch() API
The fetch() API retrieves JSON files asynchronously and parses them into JavaScript objects.
Syntax
fetch('sample.json')
.then(response => response.json()) // Parse JSON
.then(data => console.log(data)) // Work with JSON data
.catch(error => console.error('Error fetching JSON:', error));- Create a sample.json file with the desired data.
- Use fetch("sample.json"), then parse the response with .json().
- Handle the data or display it, using .catch() for errors.
HTML
<html>
<head></head>
<body>
<script>
function fetchJSONData() {
fetch('./sample.json')
.then(response => {
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
return response.json();
})
.then(data => console.log(data))
.catch(error => console.error('Failed to fetch data:', error));
}
fetchJSONData();
</script>
</body>
</html>
//sample.json
{
"users": [
{
"site": "GeeksForGeeks",
"user": "Shobhit"
}
]
}
Output
Using the fetch() API to Read JSON Files 2. Using require() Method in Node.js
In a Node.js environment, require() is a simple way to read JSON files synchronously.
Syntax
const data = require('./sample.json');
console.log(data);- Create the JSON file (sample.json).
- Use require() to import the JSON data.
- Log or manipulate the data.
JavaScript
// Node.js example
const data = require('./sample.json');
console.log(data);
//sample.json
{
"users": [
{
"site": "GeeksForGeeks",
"user": "Shobhit"
}
]
}
Using require() Method in Node.js3. Using the import Statement for ES Modules
In modern JavaScript (ES Modules), use import ... assert { type: 'json' } to load JSON asynchronously in Node.js (v17+) and supported browsers.
Syntax
import jsonData from './path/to/jsonFile.json' assert { type: 'json' };
console.log(jsonData);- Enable ES Modules with .mjs or type: "module" in package.json.
- Use import ... assert { type: 'json' } and process the data.
HTML
<html>
<head></head>
<body>
<h1>JSON Import Example</h1>
<p>Check your console for fetched data.</p>
<script type="module">
import jsonData from './sample.json' assert { type: 'json' };
console.log(jsonData);
</script>
</body>
</html>
//sample.json
{
"name": "Johina",
"age": 30,
"profession": "Developer"
}
Output
{
"name": "Johina",
"age": 30,
"profession": "Developer"
}- Browser compatibility :ES Modules with the import syntax are supported in modern browsers.
- Node.js compatibility :Requires Node.js v17 or higher with appropriate module settings.
Using the import Statement for ES Modules
Similar Reads
How to read a local text file using JavaScript? JavaScript can read local files using the File API, which is supported by most modern browsers. The File API allows JavaScript to read the contents of files chosen by the user, typically through an HTML file input element.The File object represents a file (like a text file or image) selected by the
6 min read
Convert XML to JSON using JavaScript Convert XML to JSON effortlessly using JavaScript, enabling seamless integration and manipulation of XML data within your applications. JavaScript libraries like xml-js and xmldom Library simplify the conversion process, ensuring compatibility and efficiency. Below are the approaches to convert XML
2 min read
JavaScript Program to read text File Given a text file, write a JavaScript program to extract the contents of that file. There is a built-in Module or in-built library in NodeJs that handles all the reading operations called fs (File-System). It is basically a JavaScript program (fs.js) where a function for reading operations is writte
2 min read
How to Parse JSON in JavaScript ? Parse JSON in JavaScript, accepting a JSON string as input and returning a corresponding JavaScript object with two methods, using JSON.parse() for parsing JSON strings directly and employing the fetch API to parse JSON responses from web APIs. These techniques are crucial for seamless data manipula
2 min read
JavaScript JSON Objects JSON (JavaScript Object Notation) is a handy way to share data. It's easy for both people and computers to understand. In JavaScript, JSON helps organize data into simple objects. Let's explore how JSON works and why it's so useful for exchanging information.const jsonData = { "key1" : "value1", ...
3 min read
Explain about Read and Write of a file using JavaScript Handling file operations such as reading and writing is a common requirement in many JavaScript applications, especially on the server side using Node.js. This article explains how to perform these operations using Node.js's built-in fs (File System) module. The fs ModuleThe fs module provides an AP
3 min read