Welcome folks today I am back with a another blog post so in this blog post we will be looking at a powerful JavaScript library which allows you to transform JSON objects into HTML language

You can visit the official website of this library at this link after visiting the website you can read the documentation all the methods are there but now this blog post we will be looking at the real world example where we will be converting the JSON into HTML we will be creating some object from JSON and then we will be creating that JSON objects into HTML

Example

Transform (template)

var transform = { " <> " : " li " , " id " : " ${id} " , " html " : [ { " <> " : " span " , " text " : " ${name} (${year}) " } ]};

Plus JSON Data

var data = { " id " : 1123 , " name " : " Jack and Jill " , " year " : 2001 };

Will render the following html

< li id = " 1123 " > < span >Jack and Jill (2001)</ span > </ li >

Using with jQuery

You can also use this library with jQuery so it is very simple to use this library so just copy below code to start working with jQuery

var transform = { " <> " : " li " , " id " : " ${id} " , " html " : [ { " <> " : " span " , " html " : " ${name} ${year} " } ], " onclick " : funciton ( e ){ alert ( " You just clicked " + e . obj . name ); }};

< li id = 1123 > < span >Jack and Jill (2001)</ span > </ li >

Installing By Node

npm install node-json2html

var json2html = require ( ' node-json2html ' ); var data = [{ ' male ' : ' Bob ' , ' female ' : ' Jane ' },{ ' male ' : ' Rick ' , ' female ' : ' Ann ' }]; var transform = { " <> " : " div " , " html " : " ${male} likes ${female} " }; var html = json2html . transform (data,transform);

Short Hand Notation

var transform = {'<>':'div','text':'${name} (${age})'}; var data = [ {'name':'Bob','age':40}, {'name':'Frank','age':15}, {'name':'Bill','age':65}, {'name':'Robert','age':24} ]; document.write( json2html.transform(data,transform) );

Inline Function

var transform = {'<>':'div','class':function(){if(this.score < 10) return('red');},'html':'${company}'}; var data = [{'company':'ABC Corp.','score':15}, {'company':'XYZ Inc.','score':9}, {'company':'PBB Org.','score':35}, {'company':'CBA Ltd.','score':5}]; document.write( json2html.transform({},transform) );

Nested Transform

var transforms = { 'item':{'<>':'li','text':'${name} (${age})'}, 'list':{'<>':'ul','html':function(){ return( json2html.transform(data,transforms.item) ); }}, var data = [ {'name':'Bob','age':40}, {'name':'Frank','age':15}, {'name':'Bill','age':65}, {'name':'Robert','age':24} ]; document.write( json2html.transform({},transforms.list) );

jQuery Selectors

var transform = {'<>':'li','text':'${name} (${age})'}; var data = [ {'name':'Bob','age':40}, {'name':'Frank','age':15}, {'name':'Bill','age':65}, {'name':'Robert','age':24} ]; $('ul').json2html( data,transform );

Events

var transform = {"<>":"div","class":"row","html":[ {"<>":"div","class":"col-sm box ${colour}","text":"${click}","onclick":function(){ $(this).css("visibility","hidden"); }}, {"<>":"div","class":"col-sm box ${colour}","text":"${dblclick}","ondblclick":function(){ $(this).css("visibility","hidden"); }} ]}; var data = [ {"click":"click me","dblclick":"dbl click me","colour":"red"}, {"click":"click me harder","dblclick":"dbl click me now","colour":"blue"} ]; $('#example-jquery-events-output').json2html( data,transform );

Real World App

var transforms = { "list":{"<>":"ul","html":function(){ return($.json2html(data,transforms.items)); }}, "items":{"<>":"li","html":function(obj,index){ return( (index+1) + ". " + obj.title); },"onclick":function(e){ $("#example-jquery-app-output .details").empty().json2html(e.obj,transforms.details); }}, "details":[ {"<>":"div","html":[ {"<>":"h5","text":"${title}"} ]}, {"<>":"div","text":"Year: ${year}"}, {"<>":"div","text":"Rating: ${rating}"}, ] }; var data = [ {"title":"The Shawshank Redemption","year":"1994","rating":"9.2"}, {"title":"The Godfather","year":"1972","rating":"9.2"}, {"title":"The Godfather: Part II","year":"1974","rating":"9.0"}, {"title":"The Dark Knight ","year":"2008","rating":"9.0"}, {"title":"12 Angry Men","year":"1957","rating":"9.0"} ]; $("#example-jquery-app-output .list").json2html({},transforms.list);

Node.js Require