Open In App
Related Articles

Read JSON file using JavaScript

Improve Article
Improve
Save Article
Save
Like Article
Like

In this article, we are going to learn how can we Read JSON(JavaScript Object Notation) files using JavaScript. JSON stands for JavaScript Object Notation. It means that a script (executable) file which is made of text in a programming language, is used to store and transfer the data.

Note: JavaScript supports JSON internally so it does not require additional modules to import and display the JSON. We just have to import the JSON file and can easily use it directly to perform manipulations on it.

These are the following method by using these we can read JSON files:

We will use the JSON file below for all approach implementations

sample.json

{
"users":[
{
"site":"GeeksForGeeks",
"user": "Shobhit"
}
]
}

Using fetch method

  • Create a JSON file and add data to it
  • Open the JavaScript file
  • In the fetch, method pass the address of the file
  • Use the .json method to parse the document
  • Display the content on the console.

Example: In this example, we will implement the above approach.

Javascript




function Func() {
    fetch("./sample.json")
        .then((res) => {
        return res.json();
    })
    .then((data) => console.log(data));
}


HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="script.js"></script>
</body>
</html>


Output:

Using require module

  • Create the JSON file as specified in the previous approach
  • Create a script.js and use the require method of the node to import the JSON file
  • Print the data on the console

Note: Instead of running the program on the browser we will run it on the console using Node. Make sure you have at least Node version 17.0.

Example: In this example, we will implement the above approach.

Javascript




const sample = require('./sample.json');
console.log(sample);


Output:

{ users: [ { site: 'GeeksForGeeks', user: 'Shobhit' } ] }

Using import module

  • Create the JSON file as described in the previous examples.
  • Create script.js file and import the JSON file

Example: In this example, we will implement the above approach.

Javascript




import user from "./sample.json" assert { type: 'json' };;
console.log(user)


Output:

{ users: [ { site: 'GeeksForGeeks', user: 'Shobhit' } ] }

Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 24 Nov, 2023
Like Article
Save Article
Previous
Next
Similar Reads
Complete Tutorials