json2html • lightning fast HTML templating for javascript, node.js & jquery

These example are great but ... more comprehensive examples can be found in the examples folder on the json2html github page

The Basics

DOM Heirarchy

let template = {'<>':'div','class':'card','html':[
                    {'<>':'img','alt':'this is our logo','src':'logo.jpg'},
                    {'<>':'p','text':'Welcome to json2html!'}
                ]};
    
document.write( json2html.render({},template) );

<div class="card">
    <img src="logo.jpg"src="this is our logo"></img>
    <p>Welcome to json2html!</p>
</div>

Short Hand Notation

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

<div>Bob (40)</div>
<div>Frank (15)</div>
<div>Bill (65)</div>
<div>Robert (24)</div>

Inline Function

let template = {'<>':'div','class':function(){if(this.score < 10) return('red');},'html':'${company}'};

let data = [{'company':'ABC Corp.','score':15},
            {'company':'XYZ Inc.','score':9},
            {'company':'PBB Org.','score':35},
            {'company':'CBA Ltd.','score':5}];
            
document.write( json2html.render({},template) );

<div>ABC Corp.</div>
<div class='red'>XYZ Inc.d</div>
<div>PBB Org.</div>
<div class='red'>CBA Ltd.</div>

Object Assignment

let template = {'ul','html':[
        {'<>':'li','text':'${name} (${age})','obj':function(){return(this.employees)}},
    ]};
    
let data = {
    'employees':[
        {'name':'Bob','age':40},
        {'name':'Frank','age':15},
        {'name':'Bill','age':65},
        {'name':'Robert','age':24}
    ]
];
    
document.write( json2html.render({},template) );

<ul>
    <li>Bob (40)</li>
    <li>Frank (15)</li>
    <li>Bill (65)</li>
    <li>Robert (24)</li>
</ul>

jQuery

Selectors

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

<ul>
    <li>Bob (40)</li>
    <li>Frank (15)</li>
    <li>Bill (65)</li>
    <li>Robert (24)</li>
</ul>

Events

let template = {"<>":"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");
                    }}
                ]};
    
let 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,template );

App

let templates = {
    "list":{"<>":"ul","html":[
    
        {"{}":function(){return(this.movies)},"html":[
        
            {"<>":"li",
                "html":function(obj,index){return( (index+1) + ". " + obj.title);},
                "onclick":function(e){$("details").empty().json2html(e.obj,templates.details);}
            }
            
        ]}
    ]},
    
    "details":[
        {"<>":"div","html":[
            {"<>":"h5","text":"${title}"}
        ]},
        {"<>":"div","text":"Year: ${year}"},
        {"<>":"div","text":"Rating: ${rating}"},
    ]
};
                
let data = {
    "movies":[
        {"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"}
    ]
};

$("#list").json2html({},transforms.list);

Components

Registering & Using


json2html.component.add('movie',{'<>':'li','text':'${title} ${year} (${rating})'});

let 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"}
];

let template = {'<>':'ul','html':[
                    {'[]':'movie','data':function(){
                        return(this.movies);
                    }}
                ]};

$("#movie-list").json2html({'movies':data},template);

<ul>
    <li>The Shawshank Redemption 1994 (0.2)</li>
    <li>The Godfather 1972 (9.2)</li>
    <li>The Godfather: Part II 1974 (9.0)</li>
    <li>The Dark Knight 2008 (9.0)</li>
    <li>12 Angry Men 1957 (9.0)</li>
</ul>

Node.js

Require

const json2html = require('node-json2html');
 
let template = {'<>':'div','text':'${name} (${age})'};
    
let data = [
    {'name':'Bob','age':40},
    {'name':'Frank','age':15},
    {'name':'Bill','age':65},
    {'name':'Robert','age':24}
];
    
let html = json2html.render(data,template);

<div>Bob (40)</div>
<div>Frank (15)</div>
<div>Bill (65)</div>
<div>Robert (24)</div>