json2html：将JSON对象转换为HTML

资讯频道 → Web前端

6顶
4踩

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

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呢？

发表评论

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

相关推荐

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

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

数据库实验七

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

数据库练习一答案

选择1 C 2 B 3 B 4 A 5 A6 D 7 D 8 B 9 D一、设有关系模式S(学号,姓名,系别), C(课号,课名,预修课号), SC(学号,课号,成绩),分别用关系代数和SQL查询语言完成下述操作：１、求选修了全部课程的学生的学号和姓名。 select 学号，姓名 from s where 学号 in (select 学号 from sc group by 学

数据库第七章作业7.8.10

8 ．某工厂生产若干产品，每种产品由不同的零件组成，有的零件可用在不同的产品上。7．学校中有若干系，每个系有若干班级和教研室，每个教研室有若干教员，其中有的教授和副教授每人各带若干研究生；原材料：原材料号，原材料名，类别，仓库号，存放量）学生（学号，姓名，学历，班级号，导师职工号）零件组成（零件号，原材料号，使用原材料量）产品组成（产品号，零件号，使用零件量）教员（职工号，姓名，职称，教研室号）零件储存（零件号，仓库号，存储量）产品（产品号，产品名，仓库号）选修（学号，课程号，成绩）

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

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

实验七数据库设计

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

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

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

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

系统架构设计综合知识（2）数据库系统

系统架构设计师教程（第二版）上对应2.3.3及6，数据库系统

数据库E-R图关系模型转换

以下为例题： “学生_课程”数据库中记录学生、班级、课程、教师等信息，学生有学号，班级号，姓名，性别，出生日期等信息；班级有班级号，班级名称，所属专业，系别等信息；教师有教师号，教师姓名，性别，出生日期，职称等信息。其中一名学生可选修多门课程，一门课程也可有多名学生选修，每个学生每门课程都有成绩，一名老师任教多门课程，一门课程也可由多名老师教授一个学生属于一个班级，一个班级有多名学生。对此题干分析提炼出实体一共有四个（学生，课程，教师，班级），其中教师与课程构成n对n的关系，课程与学生也构成n

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

学生信息管理系统。

6管理信息系统笔记

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

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

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

ER图（转）

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

数据库候选关键词怎么求_数据库系统概论综合测试试卷二

1．数据库技术的奠基人之一E.F.Codd从1970年起发表过多篇论文，主要论述的是。层次数据库网状数据模型关系数据库面向对象数据库2．数据库系统的数据独立性是指。不会因为数据的变化而影响应用程序不会因为系统数据存储结构与数据逻辑结构的变化而影响应用程序不会因为数据存储策略的变化而影响数据存储结构的变化不会因为某些存储结构...

驾校管理系统给予WEB ，ASP.NET 驾校信息管理系统，包含业务流程图，数据流程图 ER图输入输出设计

给予WEB ，ASP.NET 驾校信息管理系统，包含业务流程图，数据流程图 ER图输入输出设计给予WEB ，ASP.NET 驾校信息管理系统，包含业务流程图，数据流程图 ER图输入输出设计给予WEB ，ASP.NET 驾校信息管理系统，包含业务流程图，数据流程图 ER图输入输出设计

数据库练习题一

一选择1．数据库技术的奠基人之一E.F.Codd从1970年起发表过多篇论文，主要论述的是。A．层次数据库 B. 网状数据模型 C. 关系数据库 D. 面向对象数据库2．数据库系统的数据独立性是指。A. 不会因为数据的变化而影响应用程序B. 不会因为系统数据存储结构与数据逻辑结构

第七章：数据库设计

7. 8. 10.关系模型如下：第7题系（系编号，系名，学校名）；班级（班级号，班级名，系编号）；教研室（教研室号，教研室，系编号）；学生（学号，姓名，学历，班级号，导师职工号）；课程（课程号，课程名）教员（职工号，姓名，职称，教研室号）；选修（学号，课程号，成绩）；第8题产品（产品号，产品名，仓库号）；零件（零件号，零件名）；原材料（原材料号，原材料名，类名，仓库号，存...

6顶4踩