JSON2HTML 将 JSON 对象转换为 HTML 轻量模板引擎 - 文章教程

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

发布于 2020-08-16 字数 2405 浏览 1848 评论 0

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/

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2891 文章
评论
84935 人气
更多

推荐作者

勿忘心安

文章 0 评论

ekko

文章 0 评论

江挽川

文章 0 评论

献世佛

文章 0 评论

Meets

文章 0 评论