How To Display JSON Data In HTML
Last Updated : Mar 11, 2024
IN - HTML JSON | Written & Updated By - Ashish
In this article we will show you the solution of how to display JSON data in HTML, data must be extracted from the provided JSON file and transformed into such an HTML table.
Method: Data is contained in a JSON file that is organized as just an object array. We use jQuery in our programming to complete our homework.
The jQuery code uses the getJSON() method to make an AJAX HTTP GET request to the file's location to retrieve the data.
There have to be two arguments. The first is the path of the JSON file, or the second is just the name of the function that holds the JSON information.
Given the JavaScript object or the aim is to output the JSON object in a nice (readable) format using JavaScript. For displaying the object inside a pleasing format, use the pre> element.
Step By Step Guide On How To Display JSON Data In HTML :-
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TC User Details</title>
<script src=
"https://code.jquery.com/jquery-3.5.1.js">
</script>
<style>
table {
margin: 0 auto;
font-size: large;
border: 1px solid black;
}
h1 {
text-align: center;
color: #006600;
font-size: xx-large;
font-family: 'Gill Sans',
'Gill Sans MT', ' Calibri',
'Trebuchet MS', 'sans-serif';
}
td {
background-color: #E4F5D4;
border: 1px solid black;
}
th,
td {
font-weight: bold;
border: 1px solid black;
padding: 10px;
text-align: center;
}
td {
font-weight: lighter;
}
</style>
</head>
<body>
<section>
<h1>TalkersCode</h1>
<table id='table'>
<tr>
<th>TC UserHandle</th>
<th>Practice Problems</th>
<th>Coding Score</th>
<th>TC Articles</th>
</tr>
<script>
$(document).ready(function () {
$.getJSON("gfgdetails.json",
function (data) {
var student = '';
$.each(data, function (key, value) {
student += '<tr>';
student += '<td>' +
value.GFGUserName + '</td>';
student += '<td>' +
value.NoOfProblems + '</td>';
student += '<td>' +
value.TotalScore + '</td>';
student += '<td>' +
value.Articles + '</td>';
student += '</tr>';
});
$('#table').append(student);
});
});
</script>
</section>
</body>
</html>
- Your HTML document should contain an open & closing HTML tag as well as an open & closing head tag and body tag. You don't require the use of the HTML tag if you want to add a background picture. Instead of using HTML, this lesson illustrates how to add a background picture using CSS.
- Cascading style sheets' first tag is this one (CSS). Before the "</head>" tag and after the "<head>" tag.
- As an alternative, you may alternatively construct your CSS inside a separate CSS page & link that to your HTML document.
- From this point on, your HTML document's body will be styled using CSS.
- After that, a <script> tag can be used to include us on an HTML page.
- Then we create a table.
- Then we fetched data from the csv file.
- Then we iterate through objects.
- Then we construction of rows having data from json object.
- Then we insert rows into the table.
Conclusion :-
As a result, we have successfully learned how to display JSON data in HTML.
The each() function iterates through the objects in the array. There are also two arguments needed. Data comes first, followed by a function that includes the element's index.
The empty string is used to build rows with the data from the JSON objects.
I hope this article on how to display JSON data in HTML helps you and the steps and method mentioned above are easy to follow and implement.
About Ashish
