The Basics

DOM Heirarchy
var transform = {'<>':'div','class':'card','html':[
                    {'<>':'img','alt':'this is our logo','src':'logo.jpg'},
                    {'<>':'p','html':'Welcome to json2html!'}
                ]};
    
document.write( json2html.transform({},transform) );
<div class="card">
    <img src="logo.jpg"src="this is our logo"></img>
    <p>Welcome to json2html!</p>
</div>
Short Hand Notation
var transform = {'<>':'div','html':'${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) );
<div>Bob (40)</div>
<div>Frank (15)</div>
<div>Bill (65)</div>
<div>Robert (24)</div>
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) );
<div>ABC Corp.</div>
<div class='red'>XYZ Inc.d</div>
<div>PBB Org.</div>
<div class='red'>CBA Ltd.</div>

Nested Transform
var transforms = {
    'item':{'<>':'li','html':'${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) );
<ul>
    <li>Bob (40)</li>
    <li>Frank (15)</li>
    <li>Bill (65)</li>
    <li>Robert (24)</li>
</ul>

jQuery

Selectors
var transform = {'<>':'li','html':'${name} (${age})'};
    
var data = [
    {'name':'Bob','age':40},
    {'name':'Frank','age':15},
    {'name':'Bill','age':65},
    {'name':'Robert','age':24}
];
    
$('ul').json2html( data,transform );
<ul>
    <li>Bob (40)</li>
    <li>Frank (15)</li>
    <li>Bill (65)</li>
    <li>Robert (24)</li>
</ul>
Events
var transform = {"<>":"div","class":"row","html":[
                    {"<>":"div","class":"col-sm box ${colour}","html":"${click}","onclick":function(){
                        $(this).css("visibility","hidden");
                    }},
                    {"<>":"div","class":"col-sm box ${colour}","html":"${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 );
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","html":"${title}"}
        ]},
        {"<>":"div","html":"Year: ${year}"},
        {"<>":"div","html":"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
var json2html = require('node-json2html');
 
var transform = {'<>':'div','html':'${name} (${age})'};
    
var data = [
    {'name':'Bob','age':40},
    {'name':'Frank','age':15},
    {'name':'Bill','age':65},
    {'name':'Robert','age':24}
];
    
var html = json2html.transform(data,transform);
<div>Bob (40)</div>
<div>Frank (15)</div>
<div>Bill (65)</div>
<div>Robert (24)</div>