如何实现json数据可视化详解


Posted in Javascript onNovember 24, 2016

前言

本文介绍的是如何实现json数据可视化,要用到的核心是JSON.stringify这个函数,没想到吧,平时我们只把它用来序列号json数据。

JSON.stringify 函数

将 JavaScript 值转换为 JavaScript 对象表示法 (Json) 字符串。

语法

JSON.stringify(value [, replacer] [, space])

参数

value

     必需。  要转换的 JavaScript 值(通常为对象或数组)。 

replacer

     可选。  用于转换结果的函数或数组。 

     如果 replacer 为函数,则 JSON.stringify 将调用该函数,并传入每个成员的键和值。  使用返回值而不是原始值。  如果此函数返回 undefined,则排除成员。  根对象的键是一个空字符串:""。 

     如果 replacer 是一个数组,则仅转换该数组中具有键值的成员。  成员的转换顺序与键在数组中的顺序一样。  当 value 参数也为数组时,将忽略 replacer 数组。 

space

     可选。  向返回值 JSON 文本添加缩进、空格和换行符以使其更易于读取。 

     如果省略 space,则将生成返回值文本,而没有任何额外空格。

     如果 space 是一个数字,则返回值文本在每个级别缩进指定数目的空格。  如果 space 大于 10,则文本缩进 10 个空格。 

     如果 space 是一个非空字符串(例如“\t”),则返回值文本在每个级别中缩进字符串中的字符。

     如果 space 是长度大于 10 个字符的字符串,则使用前 10 个字符。

返回值

一个包含 JSON 文本的字符串。

json数据可视化

我们要用到的就是这第三个参数,它可以指定在生成的字符串中加多少空格,从而生成有一定格式的字符串。生成的字符串我们可以放在<pre>标签中,这样就能很好的显示缩进。然后呢,为了让生成的数据有高亮效果,我们还可以写一个简单的高亮函数。

基本就是这么个原理啦,请看代码实现:

function output(inp) {
 document.body.appendChild(document.createElement('pre')).innerHTML = inp;
}

function syntaxHighlight(json) {
 json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
 return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
  var cls = 'number';
  if (/^"/.test(match)) {
   if (/:$/.test(match)) {
    cls = 'key';
   } else {
    cls = 'string';
   }
  } else if (/true|false/.test(match)) {
   cls = 'boolean';
  } else if (/null/.test(match)) {
   cls = 'null';
  }
  return '<span class="' + cls + '">' + match + '</span>';
 });
}

var obj = {
 num: 1234,
 str: '字符串',
 arr: [1,2,3,4,5,6],
 obj: {
  name: 'tom',
  age: 10,
  like: ['a', 'b']
 }
};
var str = JSON.stringify(obj, undefined, 4);

output(syntaxHighlight(str));

最终生成的效果就是这样的:

如何实现json数据可视化详解

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
优化网页之快速的呈现我们的网页
Jun 29 Javascript
告诉大家什么是JSON
Jun 10 Javascript
qTip 基于JQuery的Tooltip插件[兼容性好]
Sep 01 Javascript
firefox浏览器用jquery.uploadify插件上传时报HTTP 302错误
Mar 01 Javascript
JS实现在状态栏显示打字效果完整实例
Nov 02 Javascript
javascript仿京东导航左侧分类导航下拉菜单效果
Nov 25 Javascript
jQuery使用getJSON方法获取json数据完整示例
Sep 13 Javascript
js中通过getElementsByName访问name集合对象的方法
Oct 31 Javascript
JS简单获取并修改input文本框内容的方法示例
Apr 08 Javascript
javascript设计模式 ? 代理模式原理与用法实例分析
Apr 16 Javascript
JS如何使用剪贴板操作Clipboard API
May 17 Javascript
js基础语法与maven项目配置教程案例
Jul 15 Javascript
BootStrap 可编辑表Table格
Nov 24 #Javascript
node.js版本管理工具n无效的原理和解决方法
Nov 24 #Javascript
jQuery实现表格与ckeckbox的全选与单选功能
Nov 24 #Javascript
自定义require函数让浏览器按需加载Js文件
Nov 24 #Javascript
JQuery实现列表中复选框全选反选功能封装(推荐)
Nov 24 #Javascript
完美解决IE不支持Data.parse()的问题
Nov 24 #Javascript
JS 终止执行的实现方法
Nov 24 #Javascript
You might like
php函数的常用方法及注意之处小结
2011/07/10 PHP
php根据日期显示所在星座的方法
2015/07/13 PHP
js几个不错的函数 $$()
2006/10/09 Javascript
jquery1.4.2 for Visual studio 2010 模板文件
2010/07/14 Javascript
表头固定(利用jquery实现原理介绍)
2012/11/08 Javascript
jQuery动画特效实例教程
2014/08/29 Javascript
JavaScript不刷新实现浏览器的前进后退功能
2014/11/05 Javascript
js去字符串前后空格的实现方法
2016/02/26 Javascript
jQuery ajax中使用confirm,确认是否删除的简单实例
2016/06/17 Javascript
jquery层级选择器的实现(匹配后代元素div)
2016/09/05 Javascript
nuxt.js 缓存实践
2018/06/25 Javascript
关于element-ui的隐藏组件el-scrollbar的使用
2019/05/29 Javascript
node.js实现带进度条的多文件上传
2020/03/27 Javascript
原生js实现五子棋游戏
2020/05/28 Javascript
在vue中获取wangeditor的html和text的操作
2020/10/23 Javascript
微信小程序实现底部弹出模态框
2020/11/18 Javascript
使用python统计文件行数示例分享
2014/02/21 Python
Django的数据模型访问多对多键值的方法
2015/07/21 Python
Python爬虫模拟登录带验证码网站
2016/01/22 Python
pytorch permute维度转换方法
2018/12/14 Python
Python-ElasticSearch搜索查询的讲解
2019/02/25 Python
Python除法之传统除法、Floor除法及真除法实例详解
2019/05/23 Python
python实现简易淘宝购物
2019/11/22 Python
解决pycharm每次打开项目都需要配置解释器和安装库问题
2020/02/26 Python
生日寄语大全
2014/04/08 职场文书
总经理检讨书
2014/09/15 职场文书
办公室务虚会发言材料
2014/10/20 职场文书
2014年社区党建工作汇报材料
2014/11/02 职场文书
辩论赛开场白大全(主持人+辩手)
2015/05/29 职场文书
阿甘正传观后感
2015/06/01 职场文书
学习心理学心得体会
2016/01/22 职场文书
同学联谊会邀请函
2019/06/24 职场文书
php7中停止php-fpm服务的方法详解
2021/05/09 PHP
python异常中else的实例用法
2021/06/15 Python
Python实战之OpenCV实现猫脸检测
2021/06/26 Python
Vite + React从零开始搭建一个开源组件库
2022/06/25 Javascript