Display JSON Data In HTML Table
Last Updated : Mar 11, 2024
IN - HTML JSON | Written & Updated By - Riya
In this article we will show you the solution of display JSON data in HTML table, given a JSON-filled HTML page, the job is to turn the JSON data into an HTML table.
Consider the JSON Object stored in a variable. Execute a method that initially updates the table element's "table" element with the column names.
The UNION of column names indicates that it is searching for all columns. Traverse all JSON data & match the key with the column name.
Put the value of the key in the proper column. If the key's value is not present, leave the column empty.
A common format for storing structured data is JSON.JSON format is used even for data that is received from a server.
Here, we'll look at how to use JavaScript and display JSON data as tables and lists on an HTML page.
A javascript object's structure is similar to that of JSON data. Data is stored as key-value pairs, in which the key can frequently be a string and the value could be anything.
The JSON file's URL is passed as a parameter to the fetch() method, which produces a Promise object.
We will receive all JSON data inside the Response object upon resolving the Promise object.
Keep in mind the JSON data structure before we begin. The graphic below demonstrates how we must use data to obtain the first student's name.
result[0].name, and we must use data to determine the first student grades. result[0].marks, where we must use data to retrieve math subject marks.
Step By Step Guide On Display JSON Data In HTML Table :-
<html>
<head>
<title>
How to convert JSON data
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
</head>
<body style = "text-align:center;" id = "body">
<h1 style = "color:green;" >
TalkersCode
</h1>
<p id = "TC_UP" style =
"font-size: 15px; font-weight: bold;">
</p>
<button onclick = "constructTable('#table')">
click here
</button>
<br><br>
<table align = "center"
id="table" border="1">
</table>
<script>
var el_up = document.getElementById("TC_UP");
var list = [
{ "col_1": "val_11", "col_3": "val_13" },
{ "col_2": "val_22", "col_3": "val_23" },
{ "col_1": "val_31", "col_3": "val_33" }
];
el_up.innerHTML = "Click on the button to create "
+ "the table from the JSON data.<br><br>"
+ JSON.stringify(list[0]) + "<br>"
+ JSON.stringify(list[1]) + "<br>"
+ JSON.stringify(list[2]);
function constructTable(selector) {
var cols = Headers(list, selector);
for (var i = 0; i < list.length; i++) {
var row = $('<tr/>');
for (var colIndex = 0; colIndex < cols.length; colIndex++)
{
var val = list[i][cols[colIndex]];
if (val == null) val = "";
row.append($('<td/>').html(val));
}
$(selector).append(row);
}
}
function Headers(list, selector) {
var columns = [];
var header = $('<tr/>');
for (var i = 0; i < list.length; i++) {
var row = list[i];
for (var k in row) {
if ($.inArray(k, columns) == -1) {
columns.push(k);
header.append($('<th/>').html(k));
}
}
}
$(selector).append(header);
return columns;
}
</script>
</body>
</html>
- The browser is informed of the HTML version we are using in our first line, which is <HTML>. Tags are the foundation of HTML documents.
- Next comes the body tag, which defines the body of the webpage. You can create this same content for your site in one specific location.
- The style property is used for the color in the following step.
- After that, a <script> tag can be used to include us on an HTML page. Following the title tag in the <head> tag, the script tag must be entered between the opening and closing brackets. Then enter the JavaScript function.
- After that, the data or information is displayed on the website by using the JavaScript function that was called from the HTML code. This is why we can use form input tags to call JavaScript functions besides their names.
- Then we create a button.
- Then we create a table using a JSON object.
- Then we get all the column names.
- After that we traversed the JSON data.
- Then we define If there is any key, which is matching with the column name
- Then we add each row in the table.
Conclusion :-
As a result, we have successfully learned how to display JSON data in html table.
The fetch() method receives the URL of the JSON file as an argument and returns a Promise object.
After the Promise object is resolved, we will receive all of the JSON data inside the Response object. Before we start, remember the JSON data structure.
I hope this article on display JSON data in HTML table helps you and the steps and method mentioned above are easy to follow and implement.
About Riya
