Package Exports

node-json2html

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (node-json2html) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

json2html

json2html is an open source javascript library that uses js templates to render JSON objects into HTML.

Build lightning fast, interactive client side templates using nothing but javascript.

Free to use under the MIT license.

www.json2html.com for full documentation.

Features

Native JS templates that work both the client and server
Interactive with embedded events directly in your templates
100% Javascript so no need to learn any new syntax: use inline js functions for complex logic

Example

json2html.render(
    [
        {"name": "Justice League", "year":2021},
        {"name": "Coming 2 America", "year":2021}
    ], 
    {"<>": "li", "html":[
        {"<>": "span", "text": "${name} (${year})"}
      ]});

Will render the following html

<li>
    <span>Justice League (2021)</span>
</li>
<li>
    <span>Coming 2 America (2021)</span>
</li

jQuery

Use seemlessly with jQuery, oh did we also mention that you can embed events in your template? Forget attaching your events after you've rendered your templates.

 {"<>":"button","text":"Click Me","onclick":funciton(e){
    alert("You just clicked this");
  }};

Will render into the following html and will alert when clicked :)

<button>Click Me</button>

Node.js

Use your temlpates seemlessly on Node.js (sorry no events here)

Installation

npm install node-json2html

Usage

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