Display json Data In HTML Table Using jQuery Ajax
Last Updated : Mar 11, 2024
IN - HTML jQuery Ajax | Written & Updated By - Amruta
In this tutorial we will show you the solution of display json data in HTML table using jQuery Ajax, 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.
By using Ajax() function we request JSON data and then display on webpage.
Step By Step Guide On Display Json Data In HTML Table Using jQuery Ajax :-
Using ajax() function with parameters ‘url,dataType,data’ used to get the JSON data.
The url parameter is a string containing the URL you want to reach with the Ajax call, this function performs an ajax request using the parameter.
When requested file gets successfully we can retrieve easily all datas from JSON file. Then we appends all data to html table.
Step By Step Guide On Display Json Data In HTML Table Using jQuery Ajax :-
<!DOCTYPE html>
<html>
<head>
<title>json data</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
table{
width: 50%;
border: 1px solid #555;
}
th{
background-color: #f1f1f1;
font-weight: bold;
padding: 6px;
}
td{
background: #f9f9f9;
padding: 6px;
text-align: center;
}
</style>
</head>
<body>
<table id="tbl">
<tr>
<th>Name</th>
<th>Age</th>
<th>Address</th>
</tr>
</table>
<script>
$.ajax({
url:'load.json',
dataType:'json',
data:{},
success: function(data){
for(var i=0; i<data.length; i++){
var row=$('<tr><td>' + data[i].name + '</td><td>' + data[i].age + '</td><td>' + data[i].add + '</td></tr>');
$('#tbl').append(row);
}
},
error: function(jqXHR, textStatus, errorThrown){
console.log('Error:'+textStatus+'-'+errorThrown);
}
});
</script>
</body>
</html>
LOAD.JSON
[{ "name":"Kavi",
"age":"18",
"add":"Karur"
},
{ "name":"Malar",
"age":"20",
"add":"Theni"
},
{ "name":"Rathi",
"age":"24",
"add":"Chennai"
}]
- <!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 support library minified file imported because we need to access ajax for retrieve JSON data.
- In <style> tag contain block of styling property for style the html table. Here we used ‘background-color’ for set the background color with respective elements, ‘font-weight: bold;’ for increase it thickness, ‘padding: 6px; and text-align: center;’ for align text to the center and ‘border: 1px solid #555;’ for style the border of table.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re 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.
- We created table by <table> tag with one row contain table headers with three columns. Because our ‘load.json’ file has three keys and respective values.
- In <script> tag we called ajax() function with parameters, ‘url,dataType,data’ url for collects file from location, dataType defines file types our file is ‘json’ and data for specifies it’s a array type.
- When file successfully requested from server using for loop to get all values in array and stored to table row with respective column. Then row inserted to table using append() method.
- If its fail to get json data from server it throws error. 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 table using jQuery Ajax 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 table using ajax method.
We learn about how to transmit data’s between client and server in web application.
When our called ajax() function request granted by server it will retrieve and stored to table row that is append to html table successfully.
By using ajax we get result easy and fast, then we will get some basics knowledge in AJAX.
About Amruta
