Load JSON File Into JavaScript
Last Updated : Mar 11, 2024
IN - JavaScript JSON | Written & Updated By - Riya
In this article we will show you the solution of load JSON file into JavaScript, 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.
In this tutorial, we will use fetch API to load JSON files. For interacting with and accessing protocol parts like requests and answers, the Fetch API provides a JavaScript interface.
Step By Step Guide On Load JSON File Into JavaScript :-
At first, we have to write the JSON file. To get the JSON file into an HTML file we have to connect the HTML file to the live server first.
JSON File
{
"details" : [
{
"id" : 1 ,
"name" : "Rohan" ,
"country" : "England" ,
"email": "Rohan@xyzmail.com"
},
{
"id" : 2 ,
"name" : "Ankita" ,
"country" : "France" ,
"email": "ankita@xyzmail.com"
},
{
"id" : 3 ,
"name" : "sourabh" ,
"country" : "India" ,
"email": "sourabh@xyzmail.com"
},
{
"id" : 4 ,
"name" : "Sree" ,
"country" : "Germany" ,
"email": "Sree@xyzmail.com"
}
]
}
Now let us see the JavaScript code first.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>load JSON file into JavaScript</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> load json file into JavaScript </h3>
</center>
<h3>list of names: </h3>
<ul>
</ul>
<script>
const list = document.querySelector('ul') ;
fetch('file.json')
.then(res => res.json())
.then(data => {
data.forEach(post => {
list.insertAdjacentHTML('beforeend', `<li>${post.name}</li>`)
}) ;
}) ;
</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
- <h3> used to add the list title and also create a <ul> tag to display the JSON data into it
- Create a <Script> tag to write JavaScript within it.
- Using const to create a constant list to get the <ul> tag using document.querySelector()
- Now using fetch() to fetch the data from file.json
- Using then() that returns a promise with response of json()
- Again using then() for data with foreach loop with post element
- Using insertAdjacentHTML() to display the Json data into the <ul> tag.
Conclusion :-
At last, here in conclusion, we can say that with this article’s help, we know how to load JSON files into JavaScript.
I hope this article on load JSON file into JavaScript helps you and the steps and method mentioned above are easy to follow and implement.
About Riya
