json2html：将JSON对象转换为HTML

资讯频道 → Web前端

6顶
4踩

2013-05-29 17:59 by 副主编 wangguo 评论(13) 有48573人浏览

json html json2html JavaScript 模板引擎

声明：ITeye资讯文章的版权属于ITeye网站所有，严禁任何网站转载本文，否则必将追究法律责任！

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>

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

jQuery插件形式：扩展了jQuery的核心库，包含了jquery事件
node.js包形式：可用于基于node.js的web服务器

项目官网：http://json2html.com/

查看图片附件

分享到：

6
顶

4
踩

评论共 13 条请登录后发表评论

13 楼 skzr.org 2013-05-31 21:45

非常nice，已经有相关的技术了，可以参考下：http://angularjs.org/
或者国内的社区：http://angularjs.cn/

12 楼 elgs 2013-05-31 02:30

JSON is ruling the world now.

11 楼 JanckyWong 2013-05-30 20:16

怎么用l?js来用？

10 楼 damoqiongqiu 2013-05-30 13:23

没有类似Ext那种HTML模板机制，对于复杂的JSON对象，做起来确实比较吃力。

9 楼 cgs1999 2013-05-30 11:13

这个比较适合简单的处理，复杂的处理貌似不适合。

目前使用artTemplate来进行类似的处理
http://aui.github.io/artTemplate/

例子
-------------------------------------------------------------------

<script>
var userTmpl = template('userTmpl', {mts:data});
document.getElementById('userList').innerHTML = userTmpl;
</script>

<script id="userTmpl" type="template">
{each mts as mt i}
 <li id="mt-{mt.mtNO}"  class="clearfix mt {if !mt.online}offline{/if}" data-mtno="{mt.mtNO}" data-type="{mt.mtType}">
		<div class="border clearfix">
			   <div class="left">
					<div class="face">
					   {if mt.online}
						 <div><img src="{mt.portrait}"/></div>
					   {else}
					      <div><img class="offline" src="{mt.portrait}"/></div>
					   {/if}
					</div>
				</div>
				<div class="con">
					<div class="con_right">
								
						<div class="mcc-action">
									{if mt.online}
										<a class="del" title="删除与会方" style="display:none"></a>
									{else}
										<a class="del" title="删除与会方"></a>
									{/if}

						            {if mt.callState==-1}
									   <a class="call" title="呼叫"></a>
                                       <a class="hang-up" title="挂断" style="display:none;"></a>
									{else if mt.callState==1}
									    <a class="hang-up" title="挂断"></a>
										<a class="call" title="呼叫" style="display:none;"></a>
									{else}
                                         <a class="call" title="呼叫" style="display:none;"></a>
									     <a class="hang-up" title="挂断" style="display:none;"></a>
									{/if}

                                    {if mt.silenceView}
                                        <a class="silence" title="设置静音"></a>									 
									{else}
                                        <a class="silence" title="设置静音" style="display:none;"></a>
									{/if}
									

                                    {if mt.unsilenceView}
                                        <a class="unsilence" title="取消静音"></a>
									{else}
                                        <a class="unsilence" title="取消静音" style="display:none;"></a>
									{/if}


                                    {if mt.unmuteView}
									    <a class="unmute" title="取消哑音" ></a>
									{else}
                                        <a class="unmute" title="取消哑音" style="display:none;"></a>
									{/if}

									{if mt.muteView}
                                        <a class="mute" title="设置哑音" ></a>
									{else}
                                        <a class="mute" title="设置哑音" style="display:none;"></a>
									{/if}
						            
									{if mt.chairmanView}
                                       <a class="chairman" title="设为管理方"></a>
									{else}
                                       <a class="chairman" title="设为管理方" style="display:none;"></a>
									{/if}

									{if mt.unchairmanView}
									   <a class="unchairman" title="取消管理方"></a>
									{else}
									   <a class="unchairman" title="取消管理方" style="display:none;"></a>
									{/if}
                                  
								    {if mt.speakerView}
								       <a class="speaker" title="设置发言方"></a>
									{else}
									  <a class="speaker" title="设置发言方" style="display:none;"></a>
									{/if}
									  
									{if mt.unspeakerView}
									   <a class="unspeaker" title="取消发言方"></a> 
									 {else}
									   <a class="unspeaker" title="取消发言方" style="display:none;"></a> 
									{/if}

									 
									 
						</div>
					</div>
					<div class="con_left">
						<div class="name" data-pinyin="{mt.pinyin}">{mt.mtAlias}</div>
						<div class="status">
							  <div class="current-status">
							      {if mt.online}
									  {if mt.secVideoState}
									    <a class="two-stream"></a>
									  {else}
									     <a class="two-stream" style="display:none;"></a> 
									  {/if}

									  {if mt.speakerState}
									    <a class="speaker"></a>
									  {else}
									     <a class="speaker" style="display:none;"></a> 
									  {/if}

									  {if mt.vmpState}
									    <a class="vmp"></a>
									  {else}
									     <a class="vmp" style="display:none;"></a> 
									  {/if}

									  {if mt.discussState}
									    <a class="discuss"></a>
									  {else}
									     <a class="discuss" style="display:none;"></a> 
									  {/if}

									  {if mt.chairmanState}
									    <a class="chairman"></a>
									  {else}
									     <a class="chairman" style="display:none;"></a> 
									  {/if}

									  {if mt.silenceState}
									    <a class="silence"></a>
									  {else}
									     <a class="silence" style="display:none;"></a> 
									  {/if}

									  {if !mt.muteState}
									    <a class="unmute"></a>
									  {else}
									     <a class="unmute" style="display:none;"></a> 
									  {/if}
								   {else}	
								       <a class="two-stream" style="display:none;"></a> 
								       <a class="speaker" style="display:none;"></a>
								       <a class="vmp" style="display:none;"></a> 
								       <a class="discuss" style="display:none;"></a> 
								       <a class="chairman" style="display:none;"></a> 
								       <a class="silence" style="display:none;"></a>
                                       <a class="unmute" style="display:none;"></a> 
								   {/if}
							   </div>
							   {if mt.callState==0}
							     <div class="immediacally-status">正在呼叫中...</div>
							   {else}
							      <div class="immediacally-status" style="display:none;">正在呼叫中...</div>
							   {/if}
						</div>
					</div>
				</div>
		</div>
	</li>
   {/each}
</script>

8 楼 zzzppp123999 2013-05-30 09:56

log.debug("测试");log.debug("测试");

7 楼 liu_qchao 2013-05-30 08:39

有点像ExtJS的模板，不过功能比较弱，下一步可以考虑支持运算符、表达式和内建函数

6 楼 clxy 2013-05-30 08:15

html模板有个巨大的优势是直观，用浏览器直接打开，所见（基本上大概）即所得。
json模板也许速度会快，但没有了这个优势。特别是复杂的界面，加上循环和分歧等，貌似不大乐观。

5 楼 lihao312 2013-05-29 18:13

lysvanilla 写道

lihao312 写道

这个？可以转化其他的？比较不是ul是div呢？

请注意var transform = {'tag':'li','html':'${name} (${age})'};
这是转换规则

不好意思刚刚看到

4 楼 lysvanilla 2013-05-29 18:12

lihao312 写道

这个？可以转化其他的？比较不是ul是div呢？

请注意var transform = {'tag':'li','html':'${name} (${age})'};
这是转换规则

3 楼 wangguo 2013-05-29 18:11

lihao312 写道

这个？可以转化其他的？比较不是ul是div呢？

可以指定
var transform = {'tag':'li','html':'${name} (${age})'};

2 楼 lihao312 2013-05-29 18:11

1 楼 lihao312 2013-05-29 18:09

这个？可以转化其他的？比较不是ul是div呢？

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

某高校科研管理系统数据库系统设计

高校科研管理所设计的事务非常繁杂，涉及到校科研处、各个院系的科研管理以及个人对科研信息的查询统计等。所设计的系统既要有利于科研处的监督管理又要有利于各个系及教师的分工协作。系统功能主要包括校科研处科研管理、院系(或部门)科研管理、个人科研信息查询、校级科研项目整体信息管理。可以划分为科研信息维护、科研信息查询与统计、科研信息报表、科研信息分析、校级课题申报、审批、结题、其它处理等操作；其中科研信息应细分为学术论文、科研项目、科研成果、科研奖励等信息。由于本系统是直接面向网上办公的，必须适应所服务环境的各类操作人员，主要包括学校科研处、各院系(或部门)、普通教师个人(或其他浏览者)。 ①普通教师个人(或其他浏览者) 普通教师个人(或其他浏览者)只能按姓名来浏览个人的科研信息、进行统计打印，个人的科研信息(论文、著作、项目成果等)必须提交本部门审核入录。 ② 各院系(或部门) 各院系(或部门)主要职责是对本部门员工的论文、科研项目、科研成果、奖励等信息进行审核后输入到本系统数据库中，查询本部门在某时间内的科研信息、统计科研情况、打印相关资料等，同时对本部门的错误录入信息进行修改和维护。 ③科研处主要管理本校的员工信息、论文、各级各类科研项目和成果、科研奖励等常规工作，同时，管理校级课题的申报、审批、结题等管理，同时，监控系统运行和各部门的情况。

数据库实验七

实验内容问题描述：某学院有基本实体集：系、教师、学生和课程。各个实体的属性集为：系：系编号，系名，地址课程：课程号，课程名称，开课学期学生：学号，学生姓名，性别，住址教师：教工号，教师姓名，办公室实体间的联系有：每个系有一位系主任，有多位教师；一个教师只能在一个系任职；每个系开设多门不同课程；一门课程只能由一个系负责开设；每门课程只能由一个教师授课，一个教师可以讲授多门课程...

数据库设计实例教务管理系统

数据库实验七数据库设计题目要求：设计一个教务管理系统。要求管理包括：学生的档案，学生选课的情况，学生每学期的综合测评，教师档案，教师工作量等等。具体考核方法根据自己了解的实际情况处理。假设此次设计的教务系统是整个学生管理系统数据库中的一部分，整个系统至少还包括学籍管理等其他子系统。在初期设计时，先关注与教务系统有关的数据。在完成对教务管理系统的建

Oracle系统案例——学生信息管理系统

学生信息管理系统。

6管理信息系统笔记

第六章管理信息系统的系统设计第一节系统设计的主要工作第二节代码设计第三节系统架构设计第四节功能结构设计第五节信息系统流程图设计第六节系统物理配置方案设计第七节数据存储设计第八节输出设计第九节输入设计第十节处理流程图设计第十一节制定设计规范和编写设计报告项目实战（1）对进销存管理系统的功能模块进行设计。（2）对进销存管理系统的输入和输出进行设计。（3）创建进销存管理系统的数据库jxcdata.accdb；在该数据库中创建以下数据表：部门、员工、仓库、供应商、客户、商品信息、商

MySQL练习——教学系统数据库设计

目录 1. 教学系统概述 2. 数据库结构设计 3. 教学系统测试 1. 教学系统概述根据大学生教学系统的原型设计出如下的ER关系图，主要来练习数据库系统的搭建：上图一共包含五个实体，分别是学生，教师，课程，院系，行政班级：其中学生和课程的关系是多对多，即一个学生可以选择多门课程，而一个课程又有多个学生选择。每个学生的每门课程都有一个成绩，所以选课表中应该有成绩字段。课程和教师是多对一关系，即一个教师只教一门课程，而一个课程又由多位老师教授。教师和院系是一对多的关..

ER图（转）

E-R图为实体-联系（Entity-Relation）图，提供了表示实体型、属性和联系的方法，用来描述现实世界的概念模型。　　构成E-R图的基本要素是实体型、属性和联系，其表示方法为：　　· 实体型(Entity)：用矩形表示，矩形框内写明实体名；比如学生张三丰、学生李寻欢都是实体。　　· 属性(Attribute)：用椭圆形表示，并用无向边将其与相应的实体连接...

程序设计综合实验——集合的表示与实现

通过代码编写生成随机数求集合元素规模较大的运算。通过键盘输入的方式求方程的解集、几数之间的公倍数等集合元素规模较小的运算。实验结果能够顺利实验集合的交集、并集、差集等运算。

数据库设计 Step by Step (3)——基本ER模型构件

引言：数据库设计 Step by Step (2)在园子里发表之后，收到了一些邮件，还有朋友直接电话我询问为什么不包含数据库物理设计方面的内容。我在这里解释一下，数据库物理设计与数据库产品是密切相关的，本系列的专注点是较为通用的数据库设计理念与方法，这也是国内软件项目中容易被忽视的一块。今天我们将学习实体关系（ER）模型构件及其语义，这是数据库逻辑设计的基础。内容可能有些枯燥，但却非常重要和有用。...

学生查询充值记录之二——DataTable转型实体集

之前写过，D层与U层的关系，因为DataTable关系更加密切了，那么解耦合

苏州大学数据库题库

2数据库设计基础（完整版可去资源下载处下载压缩包） 1.学院的每名教师只能属于一个系，则实体系和实体教师间的联系是（）一对一多对多多对一一对多参考答案:D 试题评析本题考查知识点是实体联系。一对多联系表现为主表中每一条记录与相关表中的多条记录关联。每名教师只能属于一个系，-个系中可以有多名教师，所以系与老师的关系为一对多。所以本题答案为D。 2.数据库管理系统（DBMS）是（）系统软件硬件系统一个完整的数据库应用系统既包括硬件、也包括软件的系统参..

问题 C: C语言11.4

问题 C: C语言11.4 时间限制:1 Sec内存限制:32 MB献花:107解决:92[献花][花圈][TK题库] 题目描述设有若干个人员的数据，其中包含学生和教师。学生的数据中包括：号码、姓名、性别、职业、班级。教师的数据包括：号码、姓名、性别、职业、职务。可以看出，学生和教师所包含的数据是不同的。现在要求把这些数据放在同一个表格中储存，使用结构体中的共用体实...

SQL触发器总结 - sql server 2012数据库基础-触发器及应用-实验报告

这是我大三第一学期《数据库基础》这门课的实验报告，总共15个实验，我挑了几个比较重要的放在博客上，方便查看和复习，尤其是最近SSM后端开发，希望对大家，以及将来的我有所帮助！ 1. 实验目的理解和掌握数据库中触发器的创建方法，体会触发器执行的条件和作用 2. 实验内容在SQL Server 环境下设计、创建DML触发器，并设定相关操作使触发器运行 3. 实验要求在实验5数据库设计...

数据库实验-触发器实验

一、实验目的 1．掌握触发器的创建、修改和删除操作。 2．掌握触发器的触发执行。 3．掌握触发器与约束的不同。二、实验环境硬件平台:PC；软件平台:Windows 7 / SQLSERVER 2008 R2；三、实验内容 1、在 Student 表中编写 insert 的触发器，假如每个班的学生不能超过 30 个，如果低于此数，添加可以完成；如果超过此数，则插入将不能实现。 2、在 ...

SQL存储过程总结 - sql server 2012数据库基础-存储过程及应用-实验报告

这是我大三第一学期《数据库基础》这门课的实验报告，总共15个实验，我挑了几个比较重要的放在博客上，方便查看和复习，尤其是最近SSM后端开发，希望对大家，以及将来的我有所帮助！本文是存储过程，通过书本和网上的参考代码和讲解，大致把存储过程理解为一个自定义函数，在多次重复使用某一个功能的时候，可以把这个功能写成一个自定义函数(存储过程)，这样使代码可读性增加，逼格也更高...... 实验要求 ...

07数据库设计（概念结构、逻辑结构）

问题描述某学院有基本实体集：系、教师、学生和课程。各个实体的属性集为：系：系编号，系名，地址课程：课程号，课程名称，开课学期学生：学号，学生姓名，性别，住址教师：教工号，教师姓名，办公室实体间的联系有：每个系有一位系主任，有多位教师；一个教师只能在一个系任职；每个系开设多门不同课程；一门课程只能由一个系负责开设；每门课程只能由一个教师授课，一个教师可以讲授多门课程；一个学生可以选修多门课程；一门课程也可以由多个学生选修。请根据以上需求完成如下操作：（1）对以上描述进行分析，进行数据库概

数据库作业16：第七章：数据库设计

7.学校有若干系每个系有若干班级和教研室每个教研室有若干教员教员中有点教授和副教授每人各带若干研究生每个班有若干学生每个学生选修若干课程每门课可由若干学生选修 8.某工厂生产若干产品每种产品由不同的零件组成，有的零件可用在不同的产品上零件由不同的原材料制成不同的零件所用的材料可以相同零件按不同产品分别放在仓库中原材料按照类别放在若干仓库中 ...

6顶4踩