Overview

json2html is a javascript HTML templating library used to transform JSON objects into HTML using a another user specified JSON transform. There are two wrappers that allow this library to be used by:

• jquery as jquery plug-in, and extending the core library to include jquery events
• node.js as node.js package, to be used on a node.js web server

Each wrapper uses the same transform, thus allowing for one transform to be written that can be run on either the web client (browser) or web server

What is a Transform?

A transform specifies a hierarchy of DOM elements (div, span, etc..). Each name value pairs, or attributes, of the transform object represent the attributes found on the DOM HTML element, with the exception the following reserved attribute names:

• tag specifies the type of DOM element (div, span etc..)
• html specifies the innerHTML this DOM element will contain
• children specifies the DOM children that this DOM element will be the parent of

<ul id="list">
    <li>Bob (40)</li>
    <li>Frank (15)</li>
    <li>Bill (65)</li>
    <li>Robert (24)</li>
</ul>

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

Getting Started

The easiest way to get started is to try out the jQuery wrapper for json2html on your web browser. Check out the interactive examples tab to see how you can start using json2html