Read JSON File Using JavaScript

Last Updated : 04 Feb, 2025

Here are the different ways to read JSON file using JavaScript

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

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"
      }
    ]
  }

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.

Using the import Statement for ES Modules

Read JSON File Using JavaScript – FAQ

1. Can I read JSON files from a local server in the browser?

Yes, you can use fetch() to read local JSON files, but make sure you are running your files on a local server (e.g., using Live Server in Visual Studio Code or http-server in Node.js) since browsers restrict direct file access.

2. What are the advantages of using import for JSON in Node.js?

The import statement is asynchronous, making it a good fit for environments that require non-blocking code. Additionally, it’s a modern and more flexible way to handle modules, especially for ES6 codebases.

3. What should I do if I encounter JSON parsing errors?

If the JSON is malformed or contains syntax errors, use try-catch blocks for error handling and ensure the JSON file is valid before attempting to parse it.