Convert Json Data to HTML Table Using json2html Javascript Library
json2html is a easy and fast javascript HTML template library used to transform JSON objects into HTML using a another user specified JSON template, which we call transforms.
json2html can be used with
Native Javascript using core library
jQuery using jQuery and core library to include jquery events
Node.js using Node.js on server side
Usage
First download json2html package from the GitHub and include the json2html.js file in <head> tag. Instead, you can also use json2html CDN file if you do not want to download and include in your project.
<script src="https://cdnjs.cloudflare.com/ajax/libs/json2html/1.4.0/json2html.min.js"></script>
Then include one <script> tag before </body> tag close. Create a variable of template which defines how you want to render Json in your HTML page.
let template =
{"<>": "li", "id":"${id}", "html":[
{"<>": "span", "text": "${name} (${year})"}
]};
<> specifies the type of DOM element you want to render like div, li, span etc..
html specifies the innerHTML DOM element will contain inlcuding all DOM children or title of tag
Then includes json data in data variable.
let data = [
{"title":"Heat","year":"1995"},
{"title":"Snatch","year":"2000"},
{"title":"Up","year":"2009"},
{"title":"Unforgiven","year":"1992"},
{"title":"Amadeus","year":"1984"}
];
Inludes HTML tag in <body> tag where you want to render the table.
<ul id="result"></ul>
Lastly render the HTML table using json2html.transform method.
document.getElementById('result').innerHTML = json2html.transform(data, template);
This will generate bellow HTML code:
<ul id="result">
<li>
<span>Heat 1995</span>
</li>
<li>
<span>Snatch 2000</span>
</li>
<li>
<span>Up 2009</span>
</li>
<li>
<span>Unforgiven 1992</span>
</li>
<li>
<span>Amadeus 1984</span>
</li>
</ul>
You can also use jQuery plugin to include jquery events. For that, first include jQuery CDN in <head> tag.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
In the last step, render HTML using json2html method.
$('#result').json2html(data, template);
Events
While using with jQuery library, you can also embed jQuery events whithin a transform. This events will trigger when transform is applied to the DOM element.
Here is some supported events:
onclick
onblur
ondblclick
ondie
onerror
onchange
onhover
onfocus
etc..
{'<>':'button','onclick':function(e) {
//e.event : the jQuery event
//e.data : user specified data from the the json2html options variable eventData (see Usage)
//e.index : the index of the array in which the source object was found
//e.obj : the source object that we are transforming
console.log(e.obj);
}}
You can also access the source jQuery element that called the event using $(this).
{'<>':'span','onclick':function(){
$(this).hide();
}
Server side render
For server side, we will use Node.js. First download json2html package by npm.
npm install node-json2html
Then define json2html constant and template variable. Also define json data variable.
const json2html = require('node-json2html');
let template = {'<>':'div','html':'${title} ${year}'};
let data = [
{"title":"Heat","year":"1995"},
{"title":"Snatch","year":"2000"},
{"title":"Up","year":"2009"},
{"title":"Unforgiven","year":"1992"},
{"title":"Amadeus","year":"1984"}
];
Then render json data to HTML table.
let html = json2html.transform(data,template);
Conclusion
This way, you can easily create HTML table from the json data. I hope it will help you.
