Recently I’m working on a project where I need to create an HTML form JSON data then first I thought Is there any jQuery or javascript plugin that I can use to create an HTML table based on JSON data?
I don’t want to define the table columns, the i just need the library that reads the keys in the JSON data and generates columns for the table. So I decided to write my own logic, we can do this task using multiple ways.
If you are a beginner in coding and currently you are trying to take the information from JSON file and create a table in HTML and then don’t worry, we will do this job in this post.
How to convert JSON with html table tag using JavaScript
I have rewritten the below code -using vanilla js and using DOM methods to prevent HTML injection for security.
Using vanilla js and using DOM methods
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
<div id="divcontent"></div>
</div>
<script type="text/javascript">
var jsondata = [
{
"id": 84,
"tourist_name": "Ammy",
"tourist_email": "ammy123@gmail.com",
"tourist_location": "USA",
"createdat": "2020-06-02T05:08:58.672851"
},
{
"id": 85,
"tourist_name": "shreya",
"tourist_email": "shreya.kumari4994@gmail.com",
"tourist_location": "India",
"createdat": "2020-06-02T05:14:40.7655781"
},
{
"id": 86,
"tourist_name": "Jenny",
"tourist_email": "Jenny96@gmail.com",
"tourist_location": "India",
"createdat": "2020-06-02T05:18:22.7652253"
},
{
"id": 87,
"tourist_name": "Apolo",
"tourist_email": "chandanjaishawal@gmail.com",
"tourist_location": "India",
"createdat": "2020-06-02T12:56:51.9287121"
},
{
"id": 88,
"tourist_name": "Ajay Nagar",
"tourist_email": "aj222@gmail.com",
"tourist_location": "India",
"createdat": "2020-06-04T08:48:53.8471058"
},
{
"id": 89,
"tourist_name": "AP",
"tourist_email": "ap.prak97@gmail.com",
"tourist_location": "India",
"createdat": "2020-06-08T15:58:26.3844855"
},
{
"id": 90,
"tourist_name": "Alexa uodate",
"tourist_email": "alexathomas1975@gmail.com",
"tourist_location": "10281 Mission Gorge Rd, Santee, CA 92071, USA",
"createdat": "2020-06-09T14:04:12.9065286"
},
{
"id": 91,
"tourist_name": "Jennifer Mathis",
"tourist_email": "jennifermathis.89904@gmail.com",
"tourist_location": "USA",
"createdat": "2020-06-10T17:12:53.4353615"
},
{
"id": 92,
"tourist_name": "_Anand_",
"tourist_email": "ap.prak101@gmail.com",
"tourist_location": "Canada",
"createdat": "2020-06-11T05:55:13.7406625"
},
{
"id": 93,
"tourist_name": "Mark",
"tourist_email": "Mark.prak102@gmail.com",
"tourist_location": "France",
"createdat": "2020-06-11T06:07:06.939638"
}
]
var tableElement = document.createElement('table');
tableElement.classList.add("table");
tableElement.classList.add("table-striped");
var tbltr = document.createElement('tr');
var tblth = document.createElement('th');
var tbltd = document.createElement('td');
// Builds the HTML Table out of myList json data from Ivy restful service.
function CreateHtmlTableFromJson(JsonArray) {
var table = tableElement.cloneNode(false),
columns = CreateTableHeaders(JsonArray, table);
for (var i = 0, maxi = JsonArray.length; i < maxi; ++i) {
var tr = tbltr.cloneNode(false);
for (var j = 0, maxj = columns.length; j < maxj; ++j) {
var td = tbltd.cloneNode(false);
cellValue = JsonArray[i][columns[j]];
td.appendChild(document.createTextNode(JsonArray[i][columns[j]] || ''));
tr.appendChild(td);
}
table.appendChild(tr);
}
return table;
}
// In below code we are Adding header row to the html table and returns the columns.
function CreateTableHeaders(jsonarray, table) {
var columnSet = [],
tr = tbltr.cloneNode(false);
for (var i = 0, l = jsonarray.length; i < l; i++) {
for (var key in jsonarray[i]) {
if (jsonarray[i].hasOwnProperty(key) && columnSet.indexOf(key) === -1) {
columnSet.push(key);
var th = tblth.cloneNode(false);
th.appendChild(document.createTextNode(key));
tr.appendChild(th);
}
}
}
table.appendChild(tr);
return columnSet;
}
var datacontainer = document.getElementById("divcontent");
datacontainer.innerHTML = "";
datacontainer.appendChild(CreateHtmlTableFromJson(jsondata));
</script>
</body>
</html>
Method 2:Convert json data to a html table using Jquery
Here I’m using jquery loop through all the json data to make a table using jQuery.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
<div id="divresult"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
var jsondata = [
{
"id": 84,
"tourist_name": "Ammy",
"tourist_email": "ammy123@gmail.com",
"tourist_location": "USA",
"createdat": "2020-06-02T05:08:58.672851"
},
{
"id": 85,
"tourist_name": "shreya",
"tourist_email": "shreya.kumari4994@gmail.com",
"tourist_location": "India",
"createdat": "2020-06-02T05:14:40.7655781"
},
{
"id": 86,
"tourist_name": "Jenny",
"tourist_email": "Jenny96@gmail.com",
"tourist_location": "India",
"createdat": "2020-06-02T05:18:22.7652253"
},
{
"id": 87,
"tourist_name": "Apolo",
"tourist_email": "chandanjaishawal@gmail.com",
"tourist_location": "India",
"createdat": "2020-06-02T12:56:51.9287121"
},
{
"id": 88,
"tourist_name": "Ajay Nagar",
"tourist_email": "aj222@gmail.com",
"tourist_location": "India",
"createdat": "2020-06-04T08:48:53.8471058"
},
{
"id": 89,
"tourist_name": "AP",
"tourist_email": "ap.prak97@gmail.com",
"tourist_location": "India",
"createdat": "2020-06-08T15:58:26.3844855"
},
{
"id": 90,
"tourist_name": "Alexa uodate",
"tourist_email": "alexathomas1975@gmail.com",
"tourist_location": "10281 Mission Gorge Rd, Santee, CA 92071, USA",
"createdat": "2020-06-09T14:04:12.9065286"
},
{
"id": 91,
"tourist_name": "Jennifer Mathis",
"tourist_email": "jennifermathis.89904@gmail.com",
"tourist_location": "USA",
"createdat": "2020-06-10T17:12:53.4353615"
},
{
"id": 92,
"tourist_name": "_Anand_",
"tourist_email": "ap.prak101@gmail.com",
"tourist_location": "Canada",
"createdat": "2020-06-11T05:55:13.7406625"
},
{
"id": 93,
"tourist_name": "Mark",
"tourist_email": "Mark.prak102@gmail.com",
"tourist_location": "France",
"createdat": "2020-06-11T06:07:06.939638"
}
]
$(document).ready(function () {
var html = '<table class="table table-striped">';
html += '<tr>';
debugger;
//creating table header
$.each(jsondata[0], function (index, item) {
html += '<th>' + index + '</th>';
});
html += '</tr>';
//creating table row and appending it in the table
$.each(jsondata, function (index, item) {
html += '<tr>';
$.each(item, function (secondindex, seconditem) {
html += '<td>' + seconditem + '</td>';
});
html += '<tr>';
});
html += '</table>';
//append html in html body
$('body').html(html);
});
</script>
</body>
</html>
*Thank you so much if you have a question please comment
JSON is a simple text based open standard data interchange format. It is completely independent language and most of it can be used with modern programming languages.
While Ajax applications commonly use JSON, Ajax is technically “Asynchronous JavaScript and XML.”
The full form of JSON is “JavaScript Object Notation” and it is pronounced “Jason.” It is most commonly used to transfer data between web applications and web servers.
While Ajax applications commonly use JSON, Ajax is technically “Asynchronous JavaScript and XML.”
JSON is a text-based data interchange format that is designed for the transmitting of structured data.
The full form of JSON is “JavaScript Object Notation” and it is pronounced “Jason.” It is most commonly used to transfer data between web applications and web servers.
JSON has many advantages over XML although XML serves only one purpose.
JSON files are saved with .json extension. Internet Media Type of JSON “application/json”.
The post Convert JSON data to HTML table using JavaScript appeared first on Software Development | Programming Tutorials.
Read More Articles
- LINQ group by datetime and sum | Linq get sum of data group by date
- [Simple Way]-JavaScript Edit table row Using Popup
- Crud operation in JavaScript using local storage | Crud operation using local storage with es6
- [Simple Way]-Add/Delete table rows dynamically using JavaScript
- Fetch and display data from API in React JS using Axios
- CRUD operation in React JS using Hooks
- How to edit/delete selected row from HTML table using JavaScript
- [Simple Way]-CRUD operations using JSON in JavaScript
- React Js- Fetch data from API with params
- React Js-Fetch data from API in functional component
- React Js- Fetch data from API using hooks
- React Js- Fetch data from API on button click
- [Simple Way]-Fetch data from API and display in table React Js
- [Simple Way]-How to display array data into tables in Reactjs
- Inline table editing with edit and delete icon in React Js
- [Simple Way]-How to create common helper class in React JS? | Fetch data from API using helper class and functions
- [Simple Trick]-How to Combined Bar and line charts Using Chart.js?
- How to Create a Stacked Bar Chart Using Chart Js Example?
- [Simple Trick]-How to display Grouped Bar Chart Using Chart Js?
- [Simple Trick]-Create a Multi Line Chart Using Chart.js
- [Simple Way]-Cascading DropDownList in Asp.Net Mvc Using Jquery Ajax
- Convert JSON data to HTML table using JavaScript
- How to Pass Parameters in AJAX POST?| JQuery Ajax Post Json Example
- Find object by id in an array of JavaScript objects
- [Simple Way]-How to get data from database using JQuery Ajax in asp net MVC
- [Easy Way]-Receive File and other form data together in ASP.NET Core Web API
- Replace image in word document using C#
- [Best Way]-How to display JSON data in HTML using Ajax
- How to add new rows to an existing word document table in C#
- Simple Way Find and replace text in Word document using C#
- Display JSON data in HTML table using JavaScript dynamically
- Add edit and delete data in an HTML table using JavaScript
- How to add, edit and delete rows of an HTML table with Jquery?
- How To Post File and Data to API using HttpClient C#
- How use VBA to get data from API with bearer token to Excel
- How send an HTTP POST request to a server from Excel using VBA?
- Simple way to Parse JSON with Excel VBA
- How to parse JSON with VBA without external libraries?
- [Solved]-How to call rest api from Excel macros vba and Parse Json
- .NET Core Web API Using Code First Entity Framework Approach
