Remodel JSON To HTML Utilizing JSON Templates – json2html.js

A quick, handy JavaScript JSON to HTML library that transforms JSON objects into HTML utilizing JSON templates. Works with Vanilla JavaScript, jQuery and Node.js.

How one can use it:

1. Load the json2html.js library and jQuery (OPTIONAL) within the HTML doc.

<!-- jQuery -->
<script src="/path/to/cdn/jquery.min.js"></script>
<!-- Json2html -->
<script src="./json2html.js"></script>

2. Put together your JSON knowledge to be renderes as HTML.

var myData = [
    {'value':10,'label':'Day 1'},
    {'value':5,'label':'Day 2'},
    {'value':15,'label':'Day 3'},
    {'value':4,'label':'Day 4'},
    {'value':5,'label':'Day 5'}
];

3. Outline the JSON template as follows:

let template = {'<>':'div','html':'${title} ${yr}'};

4. Transforms the JSON into HTML primarily based on the template you outlined.

// Vanila JS 
doc.write( json2html.render(knowledge,template) );

// jQuery
$(operate(){
  $(SELECTOR).json2html(knowledge,template);
});

5. The plugin additionally helps occasion handlers primarily based on jquery’s on technique.

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

Changelog:

v3.1.1 (2024-02-10)

v2.2.3 (2023-02-10)

• Correct cleanup for jquery occasions (removing of -j2h-e occasion attribute)
• Added assist for – (sprint) in variable title for shorthand notation

v2.2.2 (2022-04-09)

• Added assist for Typescript
• Added assist for areas in json variable names for brief hand notation
• Mounted subject with prepared occasion firing a number of instances

v2.2.1 (2022-01-25)

• Mounted subject with variable title beginning with $

2021-11-04

• Deprecated reserved ‘obj’ attribute and changed with new ‘{}’ attribute
• Added assist for a number of occasions per object (beforehand restricted to 1 occasion per attribute)
• Added experimental ES6 literal assist
• Updated examples to make use of new reserved {} attribute

2021-10-30

• Multi occasions assist & ES6

2021-05-20

• Mounted onready duplicate set off subject

v2.0.0 (2021-03-31)

• Added obj reserved attribute to templates for specifying knowledge objects to render (html parts and elements)
• Added html blocks to map knowledge to blocks of templates
• Added automated testing with mocha

v1.4.1 (2020-04-10)

v1.4.0 (2020-03-02)

• Merged jQuery into grasp json2html.js and added verify for jQuery.

This superior jQuery plugin is developed by moappi. For extra Superior Usages, please verify the demo web page or go to the official web site.