欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  资讯频道

json2html:将JSON对象转换为HTML

程序员文章站 2022-06-03 22:09:57
...
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>

json2html提供了以下两种形式,以便在服务器端和客户端都能使用:

  • jQuery插件形式:扩展了jQuery的核心库,包含了jquery事件
  • node.js包形式:可用于基于node.js的web服务器
项目官网:http://json2html.com/