一个能够快速把JSON数据格式化成漂亮网页的开源JavaScript库:angular-json-human

原创 2017年05月21日 20:58:02

有的时候,我们在做快速原型的时候,我们需要把获取的JSON数据快速的格式化并在本地的网站上面显示;或者把JSON数据过于复杂,且没有一定的规律,但是我们想把JSON的数据格式以更加友好的方式显示出来;这个时候怎么办?经过在Github上的搜索,笔者发现了一个比较有意思的开源框架,刚好能满足我们的要求。

具体下载地址为:https://github.com/yaru22/angular-json-huma, 其支持JSON格式的字符串,也支持JSON格式的javascript对象;而且其是基于AngularJS的,可以和AngularJS无缝的集成起来;下面是其提供的一个Example,显示出来的界面。



具体用法也很简单,只需要引入下面的几个JavaScript文件和一个CSS文件。

  <script src="lodash.js"></script>
  <script src="angular.js"></script>
  <script src="angular-json-human.js"></script>
  <link href="angular-json-human.css" rel="stylesheet" />

代码需要做的就是把要显示的JSON格式的字符串或者对象绑定到一个angular-json-human框架自定义的json-human的标签属性里面。

如下面所示意:

 <div json-human="jsonStr"></div>

简单吧。而且效果是杠杠的。

需要注意的是,如果是JSON格式的字符串,最好能把其中的双引号的JSON个格式数据替换成为单引号的字符串数据格式,否则显示的时候,可能会有一点不正常。但是并不影响快速原型环境中的使用。





版权声明:本文为博主原创文章,未经博主允许不得转载。

分享一段JS格式化JSON的代码

项目中需要在页面中格式化JSON代码,看到百度上有一个这样的应用,地址:http://app.baidu.com/editjson?keyword=json%E7%BC%96%E8%BE%91%E5%...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

javascript 格式化 json字符串

/* 此 */ function jsonStringify(data,space){     var seen=[];     return JSON.stringify(data,f...
  • samxx8
  • samxx8
  • 2014年04月25日 11:20
  • 8529

巧用JSON.stringify()生成漂亮格式的JSON字符串

巧用JSON.stringify()生成漂亮格式的JSON字符串使用JavaScript处理XML基本上就是一个杯具,这也是JSON在程序开发中广受欢迎的原因。我曾经写过一个 JavaScript函数...
  • renfufei
  • renfufei
  • 2015年03月09日 16:32
  • 22314

angularJs中$http获取后台数据实例

1.html 网站名称 网址

JQuery递归解析无限层级JSON对象的所有key和value

前一段时间做了一个小项目,要加一个json数据自动绑定前台表单的功能,类似于jquery-easyui里面的数据绑定(给它一个json对象,就能自动解析里面所有的数据。json数据的key对于表单的n...

angular post json数据到服务器,跨域访问,多大括号

感谢,终于找到json数据post到服务器的传输方式,不会再报跨域访问和服务器接收格式的错误...

分享一个小工具:Excel表快速转换成JSON字符串

在游戏项目中一般都需要由策划制作大量的游戏内容,其中很大一部分是使用Excel表来制作的。于是程序就需要把Excel文件转换成程序方便读取的格式。 之前项目使用的Excel表导入工具都是通过Of...

分享一个小工具:Excel表快速转换成JSON字符串

分享一个非常高效的将Excel表单转换完成JSON数据的小工具。
  • Neil3D
  • Neil3D
  • 2014年10月25日 13:56
  • 41117
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:一个能够快速把JSON数据格式化成漂亮网页的开源JavaScript库:angular-json-human
举报原因:
原因补充:

(最多只允许输入30个字)