How To Display JSON Data In HTML Using Ajax
Last Updated : Mar 11, 2024
IN - HTML Ajax | Written & Updated By - Pragati
In this article we will show you the solution of how to display JSON data in HTML using Ajax, 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 tutorial, we will display JSON data from the URL using AJAX or asynchronous JavaScript and XML. Using AJAX we can read or send data to a web server.
Step By Step Guide On How To Display JSON Data In HTML Using Ajax :-
Let’s see an example first.
<!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> how to display JSON data in HTML using ajax </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 ;
}
table, tr,td,th{
border: 1px solid black;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<h1> TALKERSCODE </h1>
<h3> how to display JSON data in HTML using ajax </h3>
<table id="table" >
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
<tbody id="myTable"></tbody>
</table>
<script>
var myArray = []
$.ajax({
method:'GET',
url:'https://reqres.in/api/users',
success:function(response){
myArray = response.data
buildTable(myArray)
console.log(myArray)
}
})
function buildTable(data){
var table = document.getElementById('myTable')
for (var i = 0; i < data.length; i++){
var row = `<tr>
<td>${data[i].first_name}</td>
<td>${data[i].last_name}</td>
<td>${data[i].email}</td>
</tr>`
table.innerHTML += row
}
}
</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.
- Into the <head> tag add a <script> tag with external link or using ajax.
- 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.
- Create a <table> with the id ‘table’, using the <th> tag to add the heading of the JSON file. Then create a <tbody> tag with the id ‘myTable’.
- Created the <style> tag to add CSS to the HTML page.
- To add JavaScript Create a <script> tag.
- Creating a variable array named ‘myArray’
- By $.ajax, mention the method ‘get’ and URL to the JSON file. Calling the buildTable() function into it and using console.log() to display the array.
- Now creating the buildTable(data) function. Creating a variable table of document.getElementById() by the id 'myTable’
- Create a for loop to print the data.
Conclusion :-
At last, here in conclusion, here we can say that with the help of this article, we are able to know how to display JSON data in HTML using ajax.
I hope this article on how to display JSON data in HTML using Ajax helps you and the steps and method mentioned above are easy to follow and implement.
About Pragati
