JSON2HTML 将 JSON 对象转换为 HTML 轻量模板引擎

Question

json2html 是一个基于 JavaScript 的 HTML 模板库，顾名思义，该库主要用于将 JSON 对象转换为 HTML 格式。

使用 json2html 进行 JSON 转换，需要先通过 JSON 来指定转换规则，比如使用转换对象的名称值或属性值作为DOM HTML元素的属性。以下是几个预留的属性名：

• tag：指定DOM元素的类型（div、span等）
• html：指定DOM元素需要包含的内容
• children：指定DOM元素的下一级内容

快速示例

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}
];
document.getElementById('list').innerHTML = 
  json2html.transform(data,transform);

结果如下：

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

在浏览器上使用

在浏览器上使用 json2htmlcdn。使用本机 JavaScript 或 JQuery。

<script src="https://cdnjs.cloudflare.com/ajax/libs/json2html/1.4.0/json2html.min.js"></script>

<script>
  let template = {'<>':'div','html':'${title} ${year}'};
      
  let data = [
    {"title":"Heat","year":"1995"},
    {"title":"Snatch","year":"2000"},
    {"title":"Up","year":"2009"},
    {"title":"Unforgiven","year":"1992"},
    {"title":"Amadeus","year":"1984"}
  ];
  
  //native javascript
  document.write( json2html.transform(data,template) );
  
  //or with jQuery
  $("#result").json2html(data,template);
  
</script>

在服务端使用

使用 npm 安装：

npm install node-json2html

const json2html = require('node-json2html');
 
let template = {'<>':'div','html':'${title} ${year}'};
    
let data = [
  {"title":"Heat","year":"1995"},
  {"title":"Snatch","year":"2000"},
  {"title":"Up","year":"2009"},
  {"title":"Unforgiven","year":"1992"},
  {"title":"Amadeus","year":"1984"}
];
    
let html = json2html.transform(data,template);

官网：http://json2html.com/