Convert Json Data to HTML Table Using json2html Javascript Library

  2339 views   5 months ago Javascript

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

  1. Native Javascript using core library
  2. jQuery using jQuery and core library to include jquery events
  3. Node.js using Node.js on server side


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=""></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 = [

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">
        <span>Heat 1995</span>
        <span>Snatch 2000</span>
        <span>Up 2009</span>
        <span>Unforgiven 1992</span>
        <span>Amadeus 1984</span>

You can also use jQuery plugin to include jquery events. For that, first include jQuery CDN in <head> tag.

<script src=""></script>

In the last step, render HTML using json2html method.

$('#result').json2html(data, template);


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:

  1. onclick
  2. onblur
  3. ondblclick
  4. ondie
  5. onerror
  6. onchange
  7. onhover
  8. onfocus
  9. etc..
{'<>':'button','onclick':function(e) {
    //e.event : the jQuery event
    //  : 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

You can also access the source jQuery element that called the event using $(this).


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 = [

Then render json data to HTML table.

let html = json2html.transform(data,template);


This way, you can easily create HTML table from the json data. I hope it will help you.

Author : Harsukh Makwana
Harsukh Makwana

Hi, My name is Harsukh Makwana. i have been work with many programming language like php, python, javascript, node, react, anguler, etc.. since last 5 year. if you have any issue or want me hire then contact me on [email protected]