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.
About Dikshita
