Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to Fetch List Of Dictionary Json Data And Show It On HTML Page As Table Data?
The task we will complete in this article is to retrieve a list of dictionary JSON data and display it as table data on an HTML page. Let's get into the article to learn more about displaying JSON data as table data on an HTML page.
HTML Table
The HTML tables are created using the <table> tag in which the <tr> tag is used to create table rows and <td> tag is used to create data cells. The elements under <td> are regular and left aligned by default.
The HTML tables allow web authors to arrange data like text, images, links, other tables, etc. into rows and columns of cells.
Syntax
Following is the syntax for HTML table −
<table>…</table>
Consider the following examples to gain a better understanding of how to display JSON data as table data on an HTML page.
Example
In the following example, we are running the script for displaying the JSON data as table data on the HTML page.
<!DOCTYPE HTML>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<body style = "background-color:#D5F5E3 ">
<p id = "tutorial"></p>
<button onclick = "maketable('#tutorial')">Click</button><br><br>
<table id="tutorial" border="1"></table>
<script>
var element_up = document.getElementById("tutorial");
var list = [
{ "S.No": "1", "Name": "RajKumar" },
{ "Rank": "23", "Name": "Maya" },
];
element_up.innerHTML = "Click Button To Change JSON Data As A Table Data.<br><br>"
+ JSON.stringify(list[0]) + "<br>"
+ JSON.stringify(list[1]) + "<br>"
function maketable(selector) {
var cols = headings(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 headings(list, selector) {
var columns = [];
var heading = $('<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);
heading.append($('<th/>').html(k));
}
}
}
$(selector).append(heading);
return columns;
}
</script>
</body>
</html>
When the script gets executed, it will generate an output consisting of data along with a click button displayed on the webpage. When the user clicks the button, the event gets triggered and displays the JSON data as table data.
Example
Considering the following example, where we are running the script for displaying JSON data as table data on the HTML page.
<!DOCTYPE HTML>
<html>
<body style="background-color:#E8DAEF">
<script>
document.writeln("<h2>Displaying Json Data As Table Data</h2>");
var books = { "tutorial" : [{ "Name" : "BMW", "price" : "6Lakh"}, ],
"tutorial1" : [{ "Name" : "Benz", "price" : "8Lakh" },] }
var i = 0
document.writeln("<table border='1'><tr>");
for(i=0;i<books.tutorial.length;i++) {
document.writeln("<td>");
document.writeln("<table border='1'>");
document.writeln("<tr><td><b>Name</b></td><td width=50>" + books.tutorial[i].Name+"</td></tr>");
document.writeln("<tr><td><b>Price</b></td><td width=50>" + books.tutorial[i].price +"</td></tr>");
document.writeln("</table>");
document.writeln("</td>");
}
for(i=0;i<books.tutorial1.length;i++) {
document.writeln("<td>");
document.writeln("<table border='1' width=100 >");
document.writeln("<tr><td><b>Name</b></td><td width=50>" + books.tutorial1[i].Name+"</td></tr>");
document.writeln("<tr><td><b>Price</b></td><td width=50>" + books.tutorial1[i].price+"</td></tr>");
document.writeln("</table>");
document.writeln("</td>");
}
document.writeln("</tr></table>");
</script>
</body>
</html>
On running the above script, the output window will pop up, displaying the table filled with data obtained from the JSON data we used in the script displayed on the webpage.
Example
Execute the below code and observe how the JSON data is displayed in the table data displayed on the webpage.
<!DOCTYPE HTML>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body onLoad="createtable('#tutorial')">
<table id="tutorial" border="1"></table>
<script>
var data = [
{ "Name": "Aditya", "Age":22 },
{ "Age": 24, "hobby": "Singing" },
{ "Name": "Varsha","Age": 21, "hobby": "Dancing" }
];
function createtable(selector) {
var columns = headings(data , selector);
for (var i = 0; i < data .length; i++) {
var row$ = $('<tr/>');
for (var colIndex = 0; colIndex < columns.length; colIndex++) {
var cellValue = data [i][columns[colIndex]];
if (cellValue == null) cellValue = "";
row$.append($('<td/>').html(cellValue));
}
$(selector).append(row$);
}
}
function headings(data , selector) {
var columnSet = [];
var headerTr$ = $('<tr/>');
for (var i = 0; i <data .length; i++) {
var rowHash = data [i];
for (var key in rowHash) {
if ($.inArray(key, columnSet) == -1) {
columnSet.push(key);
headerTr$.append($('<th/>').html(key));
}
}
}
$(selector).append(headerTr$);
return columnSet;
}
</script>
</body>
</html>
When the script gets executed, the event gets triggered and displays the table along with some data obtained from the JSON data used in the script displayed on the webpage.
784 Views
