json2html：将json对象转换为html -凯发k8国际

资讯频道 → web前端

6顶
4踩

json2html：将json对象转换为html

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

json html json2html javascript 模板引擎

声明：iteye资讯文章的凯发k8国际的版权属于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);

结果如下：


    bob (40)
    frank (15)
    bill (65)
    robert (24)

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

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

项目凯发k8国际娱乐官网入口官网：

分享到：

6
顶

4
踩

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

13 楼 2013-05-31 21:45

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

12 楼 2013-05-31 02:30

json is ruling the world now.

11 楼 2013-05-30 20:16

怎么用l?js来用？

10 楼 2013-05-30 13:23

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

9 楼 2013-05-30 11:13

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

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

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

8 楼 2013-05-30 09:56

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

7 楼 2013-05-30 08:39

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

6 楼 2013-05-30 08:15

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

5 楼 2013-05-29 18:13

lysvanilla 写道

lihao312 写道

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

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

不好意思刚刚看到

4 楼 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 楼 2013-05-29 18:11

1 楼 2013-05-29 18:09

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

发表评论

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

相关推荐

在线公交查询系统，能够根据站点，线路和换乘三种情况查询公交线路。换乘查询分为时间最短和换乘最少两种。

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

学生信息管理系统。

【代码】数据库实验四。

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

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

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

选择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 学

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

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

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

数据库实验八触发器实验掌握数据库触发器的设计和使用方法。定义 before 触发器和 after 触发器。能够理解不同类型触发器的作用和执行原理，验证触发器的有效性。

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

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

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

2007-03-31 16:23:58

湖南科技大学计算机科学与工程学院《数据库系统》课程设计题目: 教学管理系统专业：计算机科学与技术年级： 2017级班级：计科三班学号： 170510323 姓名：雨萱完成时间：2019年1月3日教务管理系统的分析与实现一．实验目的数据库系统课程设计是为了配合数据库原理及应用开发而...

07 数据库系统设计综合实验实验报告广州大学学生实验报告开课学院及实验室：计算机科学与工程实...

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

--是注释的意思多行注释是/* ... */ create database wyyfirst //创建数据库 sp_helpdb 'wyyfirst' 显示该数据库 sp_renamedb 'a','b' 重命名 drop database wyy 删除数据库 1、在查询分析器中创建一个数据库，要求如下：（1）数据库名称 test2。（2）主要数据文件：逻辑文件名为test2_d...

json2html：将json对象转换为html -凯发k8国际

6顶4踩