Display json Data In HTML Using JavaScript
Last Updated : Mar 11, 2024
IN - HTML JavaScript | Written & Updated By - Dikshita
In this tutorial we will show you the solution of display json data in HTML using JavaScript, JSON(Javascript Object Notation) used for transmitting data in web application.
AJAX is asynchronus javascript and XML, used on client side as a group of interrelated web development techniques to create asynchronus web applications.
Step By Step Guide On Display Json Data In HTML Using JavaScript :-
When we click on button in html document getJSON() method called and it retrieves JSON data from json file.
In json file has row of array values used each loop for collects data and those values bind to html list element by append method.
When execute this code we need some jquery library support, so we downloaded and import it. Let see how to implement this.
<!DOCTYPE html>
<html>
<head>
<title>json data</title>
<script src="jquery-1.7.0.min.js" type="text/javascript"></script>
</head>
<body>
<ul></ul>
<button>Display</button>
<script type="text/javascript">
$("button").click(function() {
$.getJSON( "sample.json", function(obj) {
$.each(obj, function(key, value) {
$("ul").append("<li>"+value.name+"</li>");
});
});
});
</script>
</body>
</html>
SAMPLE.JSON
{
"v1": { "name": "arun",
"country": "America" },
"v2": { "name": "prawin",
"country": "India" }
}
- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is contain information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
- In <script> tag jquery library support minified file imported because we used jquery for retrieve JSON data.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If your not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
- <ul> tag stands Unordered List and used for listing items in html. Here <ul></ul> tag we used to list retrieved json datas.
- <button> tag is used to create clickable button within HTML form and we can put content like text or image within <button></button>. Here we used for display retrieved json data so we name it as Display.
- $ symbol is a selector function that selects DOM elements, DOM stands Document Object Model. Which is used as an alias for JQuery.
- Within <script> tag we defined jquery for retrieving. $("button").click(function() this line defines when button clicked this jquery will load.
- In $.getJSON( "sample.json", function(obj) line using getJSON method for fetch sample.json file and function with object as parameters. Object indicates the json data of “v1”,”v2”.
- $.each(obj, function(key, value) each used for when we fetch array of values and within function two parameters passed key,value indicates name and respective value “prawin”.
- In $("ul").append("<li>"+value.name+"</li>"); line value.name refers “arun”,”prawin” in json file will display with list because of <li> tag and result is bind to <ul> tag in html by using append() method.
- Note when we execute must run the server first then only we can see result.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
I hope this tutorial on display json data in HTML using JavaScript helps you and the steps and method mentioned above are easy to follow and implement.
In conclusion now we are able to display json data in html using ajax method and jquery.
We learn about how to transmit data’s between client and server in web application.
By this topic we will get some basics knowledge in JSON, AJAX and JQuery languages.
About Dikshita
