All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

JavaScript Write JSON To File

Last Updated : Mar 11, 2024

JavaScript Write JSON To File

In this article we will show you the solution of JavaScript write JSON to file, let's begin with comprehending JSON. JSON is short for JavaScript Object Notation. It is a small-sized format for data sharing.

It mostly utilizes API. JSON is language-independent and supports a wide range of frameworks and languages.

Let us know about the fetch API now.

For interacting with and accessing protocol parts like requests and answers, the Fetch API provides a JavaScript interface.

It also provides the fetch() method, which provides an easy-to-understand means of asynchronously fetching network resources.

Step By Step Guide On JavaScript Write JSON To File :-

At first, we need a JSON file, file.json first. This has to be created in the same folder as the JavaScript file.

JSON file

{
    "details" : [
    {
        "id" : 1 ,
        "name" : "Rohan" ,
        "country" : "England" ,
        "email": "Rohan@xyxmail.com"
    },
    {
        "id" : 2 ,
        "name" : "Ankita" ,
        "country" : "France" ,
        "email": "ankita@xyxmail.com"
    },
    {
        "id" : 3 ,
        "name" : "sourabh" ,
        "country" : "India" ,
        "email": "sourabh@xyxmail.com"
    },
    {
        "id" : 4 ,
        "name" : "Sree" ,
        "country" : "Germany" ,
        "email": "Sree@xyxmail.com"
    }
]
}

JavaScript file

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript write JSON to file</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
    <style>
        h1 {
          color : rgb(95, 194, 95) ;
          font-size: 25px;
          font-weight : bolder ;
        }
    </style>
</head>
<body>
    <center>
        <h1> TALKERSCODE </h1>
        <h3> JavaScript write JSON to file </h3>
    </center>
    <script>
     fetch("file.json")
     .then(response => response.json())
     .then(data => showInfo(data)) ;
     function showInfo(data) {
        console.table(data.details) ;
     }
    </script>
</body>
</html>
  1. To write HTML code <! DOCTYPE html> to mention which version of the HTML file is written in.
  2. Then we have to write the <html> tag used to define the root of an HTML document. And also write the ending tag </html>.
  3. <head> tag used here to use to contain the metadata about the HTML file and end it with </head> tag
  4. Then <title> tag is used to set the title of the HTML document and end it with </title> tag.
  5. In order to style the HTML page, we'll utilize an external CSS file
  6. using <style> tag to add CSS
  7. <h1> tag used to add a heading close it with </h1> tag
  8. Create a <Script> tag to write JavaScript within it.
  9. Now using the fetch() to access the file.json
  10. Using the then() method that returns a promise with json()
  11. Again using then() method with a function of data
  12. In that function, display the JSON data as table using console.table().

Conclusion :-

At last, here in conclusion, we can say that with this article’s help, we know how to write JSON to file in JavaScript.

I hope this article on JavaScript write JSON to file helps you and the steps and method mentioned above are easy to follow and implement.

Author Image About Dikshita

Passionate Electronics and Communication Engineering student with expertise in web development (HTML, CSS, JS,PHP, Bootstrap, React.js) and content writing. Eager problem solver and tech enthusiast, adept at creating engaging web experiences.

Follow Dikshita On Linkedin 🡪