In this article we will show you the solution of display JSON data in HTML page, let us understand JSON first. The JSON stands for JavaScript Object Notation.
It is a lightweight data-exchanging format. It is used basically with API. JSON is language-independent and supports all kinds of frameworks and languages.
In this article, we will display JSON data on the HTML page using fetch() API.
Step By Step Guide On Display JSON Data In HTML Page :-
At first, we have to create a JSON file.
Here we created a local JSON file in the same folder as the HTML file named File.json:
[
{
"name" : "peter" ,
"city" : "tokyo" ,
"gender" : "male",
"email": "peter@gmail.com"
},
{
"name" : "mary" ,
"city" : "london" ,
"gender" : "female",
"email": "mary@gmail.com"
},
{
"name" : "thomas" ,
"city" : "paris" ,
"gender" : "male",
"email": "thomas@gmail.com"
},
{
"name" : "john" ,
"city" : "new york" ,
"gender" : "male",
"email": "john@gmail.com"
}
]
Let us see the code using fetch() method to display JSON data in HTML page.
<!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> display json data in html page </title>
<style>
h1 {
font-size : larger ;
font-weight : bolder ;
color : rgb(113, 221, 113) ;
text-align : center ;
}
h3 {
text-align : center ;
font-family : 'Lucida Sans' , 'Lucida Sans Regular' , 'Lucida Grande' , 'Lucida Sans Unicode' , Geneva , Verdana , sans-serif ;
}
</style>
</head>
<body>
<h1> TALKERSCODE </h1>
<h3> display json data in html page </h3>
<script>
fetch('file.json')
.then(results => results.json())
.then(console.log)
</script>
</body>
</html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now the <head> tag is used to contain information about the web page, create a <script> tag with a URL that is used to access the library of jQuery. In this tag, a <title> tag is used which helps us to specify a webpage title.
- Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Thirdly, the <body> tag is used to define the webpage body. All the contents to show on the website are written here.
- <h1> tag used to add heading here.
- Created the <style> tag to add CSS to the HTML page.
- to add JavaScript Create a <script> tag.
- Using the fetch() method here to read the local JSON file.
- Using console.log() to display it.
Conclusion :-
At last, here in conclusion, here we can say that with the help of this article, we are able to know display JSON data on HTML pages.
I hope this article on display JSON data in HTML page helps you and the steps and method mentioned above are easy to follow and implement.
About Ashish
