Read JSON File Using JavaScript

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>

JavaScript

//sample.json
{
    "users": [
      {
        "site": "GeeksForGeeks",
        "user": "Shobhit"
      }
    ]
  }

Output

Screenshot-2025-01-14-092110 — 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);

JavaScript

//sample.json
{
    "users": [
      {
        "site": "GeeksForGeeks",
        "user": "Shobhit"
      }
    ]
  }

Screenshot-2025-01-14-094201 — Using require() Method in Node.js

3. 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>

JavaScript

//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.

Screenshot-2025-01-14-102127 — Using the import Statement for ES Modules

Read JSON File Using JavaScript

S

shobhit_sharma

Improve

Article Tags :

Similar Reads

How to read a local text file using JavaScript?

Reading a local text file involves accessing the contents of a file stored on a user's device. Using JavaScript, this can be achieved with the HTML5 File API and the FileReader object, which reads files selected through an <input> element or drag-and-drop, asynchronously. Getting Started with

JavaScript- Edit a CSV File using JS

If you want to edit a CSV file using JavaScript, you can use the following methods depending on your environment (browser or Node.js). 1. Editing CSV in the BrowserIf you're working with a CSV file in the browser, you can use JavaScript to manipulate the CSV data (after converting it into a readable

JavaScript JSON stringify() Method

The JSON.stringify() method in JavaScript is used to convert JavaScript objects into a JSON string. This method takes a JavaScript object as input and returns a JSON-formatted string representing that object. Syntax: JSON.stringify(value, replacer, space);Parameters: value: It is the value that is t

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

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

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

JavaScript JSON Parser

JSON (JavaScript Object Notation) is a popular lightweight data exchange format for sending data between a server and a client, or across various systems. JSON data is parsed and interpreted using a software component or library called a JSON parser. Through the JSON parsing process, a JSON string i

JSON vs JavaScript Object

JSON (JavaScript Object Notation) and JavaScript Objects are important for handling data in JavaScript, but they serve different purposes. JSON is a lightweight data format for transferring data, while JavaScript Objects are in-program data structures used for manipulation and logic.What is JSON?JSO

JavaScript JSON Complete Reference

JavaScript JSON (JavaScript Object Notation) is a lightweight format for storing and exchanging data. It is easy to read, write, and parse. JSON is based on key-value pairs and arrays.JavaScriptlet data = '{"name":"Raj","age":25}'; let obj = JSON.parse(data); // Convert JSON string to object console

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", ...