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

  • Z时代
  • 2024-01-10
  • 分类：IT

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

JSON2HTML 将 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/

以上是 JSON2HTML 将 JSON 对象转换为 HTML 轻量模板引擎 的全部内容， 来源链接： utcz.com/p/232662.html

回到顶部