JavaScript Write JSON To File
Last Updated : Mar 11, 2024
IN - JavaScript JSON | Written & Updated By - Dikshita
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>
- To write HTML code <! DOCTYPE html> to mention which version of the HTML file is written in.
- Then we have to write the <html> tag used to define the root of an HTML document. And also write the ending tag </html>.
- <head> tag used here to use to contain the metadata about the HTML file and end it with </head> tag
- Then <title> tag is used to set the title of the HTML document and end it with </title> tag.
- In order to style the HTML page, we'll utilize an external CSS file
- using <style> tag to add CSS
- <h1> tag used to add a heading close it with </h1> tag
- Create a <Script> tag to write JavaScript within it.
- Now using the fetch() to access the file.json
- Using the then() method that returns a promise with json()
- Again using then() method with a function of data
- 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.