How to 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

  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

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:

  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
    //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.

Was this article helpful?

1 out of 1 person found this article helpful.

Leave a comment

Or

2 Comment

SA
Me
March 10, 2021

I think you meant to say convert a json list into an html list?

SA
Me
March 10, 2021

I think you meant to say convert a json list into an html list?