html json 模版语言,JSON2HTML 将 JSON 对象转换为 HTML 轻量模板引擎 - 文章教程

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);

结果如下：

• Bob (40)
• Frank (15)
• Bill (65)
• Robert (24)

在浏览器上使用

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

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);

在服务端使用

使用 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);