json2html：将JSON对象转换为HTML

资讯频道 → Web前端

6顶
4踩

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

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

发表评论

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

相关推荐

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

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

数据库实验七

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

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

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

数据库：实验四数据库设计

在此次实验中，我们对设计一个电子商务系统的数据库进行了详细的分析和设计。首先，我们定义了各种所需的表，包括用户表、商家表、商品表、订单表、订单详情表、购物车表、购物车详情表和地址表。我们重点讨论了商品类别的管理，初步设计时将类别信息单独放入商品类别表，并在商品表中通过外键引用。这样的设计具有高度的规范化，减少了数据冗余，增强了数据一致性和扩展性。在进一步讨论中，我们探讨了将类别信息直接合并到商品表中的可能性和影响。

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

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

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

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

数据库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. 理解触发器的作用和工作机制； 2. 掌握某一具体DBMS的SQL编程语言，在前面创建的数据库基础上，定义BEFORE触发器和AFTER触发器，并验证设计的触发器是否起作用。二. 实验内容 1. 触发器的设计； 2. 触发器正确性验证。三. 实验要求、过程及结果设计一个触发器，实现如下功能：在Student中, 当删除某一同学S#时，该同学的所有选课也都要删除；完成触发器的创建假设Student表中某一学生要变更其主码S#的值，如使其原来的98030101变更为99

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

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

数据库系统设计实验一

实验问题描述：图1 教学管理系统E-R图某学院有若干专业，每个专业有若干学生；学院每年每学期都开设有若干门课程；每门课程有多个学生选修，每个学生每学期可以同时选修多门课程，每个学生对于同一门课程可以多次选修，但每学期只能选修1次，课程选修成绩以综合成绩记录。请设计某学院简单的教学管理系统的E-R模型，要求给出每个实体、联系的属性。根据以上语义，我们可得了上图1如示的教学管理系统E-R图（属性未画出）。根据学院提供的学生选课及其他的部分数据，将上图1所示的E-R图中的部分实体和联系转换为关系，得到

实验七数据库设计

数据库系统概论之设计与应用开发篇——第6章关系数据理论（范式理论）

本篇讲解在开发应用系统时如何在已经选定的数据库管理系统基础上设计数据库，以及如何基于数据库系统编程。本篇包括三章。第6章关系数据理论，详细讲解关系规范化理论，它既是关系数据库的重要理论基础，也是数据库设计的有力工具。规范化理论为数据库设计提供了理论指南和工具。第7章数据库设计，讨论数据库设计的方法和步骤，详细讲解数据库设计各阶段的目标、方法和应注意的问题；重点讲解概念结构和逻辑结构的设计。概...

西南交通大学2017年计算机复试笔试题（数据库）

声明以下注释全是本人查阅资料后的个人观点，如有错误，欢迎评论区指正，非常感谢！！数据库推荐先在b站看哈工大的《数据库系统》课程视频，讲得非常清晰！一、选择题 1、下列四项中，不属于数据库系统的主要特点的是（） A、数据结构化 B、数据的余度小 C、较高的数据独立性 D、程序的标准化数据库系统的主要特点： 1、数据结构化 2、数据的共享性高，冗余度低，易扩充 3、数据独立性高 4、数据由DBMS统一管...

苏州大学数据库题库

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

问题 C: C语言11.4

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

数据库实验报告--基本命令以及触发器

大家不妨下载下来参考、学习，值得下载，下吧下吧

6顶4踩