一个快速、方便的JavaScript JSON到HTML库，使用JSON模板将JSON对象转换为HTML。可与Vanilla JavaScript、jQuery和Node.js配合使用。

如何使用它:

1.在HTML文档中加载json2html.js库和jQuery（可选）。

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

2.准备您的JSON数据以呈现为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.定义JSON模板如下：

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

4.根据您定义的模板将JSON转换为HTML。

// Vanila JS 
document.write( json2html.render(data,template) );
 
// jQuery
$(function(){
  $(SELECTOR).json2html(data,template);
});

5.该插件还支持基于jquery的事件处理程序on方法

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

更新日志：

v2.2.3版本（2023-02-10）

• 正确清理jquery事件（删除-j2h-e事件属性）
• 增加了对变量名中-（破折号）的支持，用于简写符号

v2.2.2版本（2022-04-09）

• 增加了对Typescript的支持
• 增加了对json变量名中空格的支持，以便于简写
• 修复了多次启动就绪事件的问题

v2.2.1版本（2022-01-25）

• 修复了变量名以开头的问题$

2021-11-04

• 已弃用保留的“obj”特性，并替换为新的“｛｝”特性
• 增加了对每个对象多个事件的支持（以前限制为每个属性1个事件）
• 增加了实验性ES6文字支持
• 已更新示例以使用新的保留｛｝属性

2021-10-30

• 多活动支持和ES6

2021-05-20

• 修复了onready重复触发器问题

2.0.0版（2021-03-31）

• 为模板添加了obj保留属性，用于指定要渲染的数据对象（html元素和组件）
• 添加了html块以将数据映射到模板块
• 增加了摩卡咖啡的自动化测试

v1.4.1 (2020-04-10)

• 更新的jQuery事件

v1.4.0 (2020-03-02)

• 将jQuery合并到主json2html.js中，并添加了对jQuery的检查。

预览截图

JSON模板将JSON转换为HTML json2html.js