Multiplication Assignment(*=) Operator in JavaScript

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

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

Multiplication Assignment(*=) Operator in 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

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 parse() Method

The JSON.parse() method is used to convert a JSON string into a JavaScript object. Itâ€™s become important when dealing with data in JSON format, interacting with APIs, or storing data in the browser. It converts a JSON string into a JavaScript object.Throws a SyntaxError if the input string is not va

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?JS

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. [GFGTABS] JavaScript let data = '{"name":"Raj","age":25}'; let obj = JSON.par

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

How to Pretty Print JSON String in JavaScript?

To pretty print JSON, you can format JSON strings with proper indentation, making them easy to read and debug. In JavaScript, you can achieve this using JSON.stringify() with optional parameters to specify the indentation level. Pretty printing JSON adds line breaks and spaces for readability.It is

JavaScript | Remove a JSON attribute

In this article, we will see how to remove a JSON attribute from the JSON object. To do this, there are few of the mostly used techniques discussed. First delete property needs to be discussed. Delete property to Remove a JSON Attribute This keyword deletes a property from an object: This keyword de