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

前言

本文介绍的是如何实现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));

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

总结

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

赞 (0)

相关推荐

  • JSON.stringify 语法实例讲解

    JSON.stringify 语法实例讲解

    认识javascript也不短的时间了,可是这个用法说实在的,我还是第一次见过,惭愧啊惭愧啊.于是乎,在网上找了写资料,写了些例子 希望能给园子们一些帮助. 作用:这个函数的作用主要是为了系列化对象的. 可能有些人对系列化这个词过敏,我的理解很简单.就是说把原来是对象的类型转换成字符串类型(或者更确切的说是json类型的).就这么简单.打个比方说,你有一个类,那么你可以通过这个方法转换成相应的json类型的.很简单吧. 接着看. 语法: JSON.stringify(value [, repla

  • Json对象与Json字符串互转(4种转换方式)

    1>jQuery插件支持的转换方式: 复制代码 代码如下: $.parseJSON( jsonstr ); //jQuery.parseJSON(jsonstr),可以将json字符串转换成json对象 2>浏览器支持的转换方式(Firefox,chrome,opera,safari,ie9,ie8)等浏览器: 复制代码 代码如下: JSON.parse(jsonstr); //可以将json字符串转换成json对象 JSON.stringify(jsonobj); //可以将json对象转换

  • jQuery怎么解析Json字符串(Json格式/Json对象)

    jQuery怎么解析Json字符串(Json格式/Json对象)

    json数据是我们常用的一种小型的数据实时交换的一个东西,他可以利用jquery或js进行解析,下面我来介绍jquery解析json字符串方法. 我们先以解析上例中的comments对象的JSON数据为例,然后再小结jQuery中解析JSON数据的方法. 上例中得到的JSON数据如下,是一个嵌套JSON: { "comments": [ { "content": "很不错嘛", "id": 1, "nickname&

  • JS对象与JSON格式数据相互转换

    目前的项目数据交互几乎都用JQuery,所以处理流程是:前端页面数据->JS对象->jQuery提交->python处理,另外一种就是倒过来.python肯定不能直接处理JS对象数据,所以要把JS对象转换成为python能处理的一种数据格式(通常是字典dict),同样,python取数据反馈到前端也要把字典数据转换成JS能处理的对象,这个中间转换数据格式通常就是JSON. 一.JS对象转换成为JSON 流程:读取前端页面数据,组装成为JS对象,并通过jQuery的$.post()方法传递

  • 用jQuery与JSONP轻松解决跨域访问的问题

    时间过得好快,又被拉回js战场时, 跨域问题这个伤疤又开疼了. 好在,有jquery帮忙,跨域问题似乎没那么难缠了.这次也借此机会对跨域问题来给刨根问底,结合实际的开发项目,查阅了相关资料,算是解决了跨域问题..有必要记下来备忘. 跨域的安全限制都是指浏览器端来说的.服务器端是不存在跨域安全限制的,所以通过本机服务器端通过类似httpclient方式完成"跨域访问"的工作,然后在浏览器端用AJAX获取本机服务器端"跨域访问"对应的url.来间接完成跨域访问也是可以的

  • 解析JSON对象与字符串之间的相互转换

    在开发的过程中,如果对于少量参数的前后台传递,可以直接采用ajax的data函数,按json格式传递,后台Request即可,但有的时候,需要传递多个参数,这样后台 接受的时候Request多个很麻烦,此时要按照类的格式或者 集合的形式进行传递. 例如:前台按类的格式传递JSON对象: var jsonUserInfo = "{\"TUserName\":\"" + userName + "\",\"TInterest\&qu

  • js中将字符串转换成json的三种方式

    ECMA-262(E3) 中没有将JSON概念写到标准中,还好在 ECMA-262(E5)中JSON的概念被正式引入了,包括全局的JSON对象和Date的toJSON方法. 1,eval方式解析,恐怕这是最早的解析方式了.如下: 复制代码 代码如下: function strToJson(str){ var json = eval('(' + str + ')'); return json; } 记得别忘了str两旁的小括号. 2,new Function形式,比较怪异哦.如下 复制代码 代码如

  • Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结

    详细解读Jquery各Ajax函数: $.get(),$.post(),$.ajax(),$.getJSON() 一,$.get(url,[data],[callback]) 说明:url为请求地址,data为请求数据的列表,callback为请求成功后的回调函数,该函数接受两个参数,第一个为服务器返回的数据,第二个参数为服务器的状态,是可选参数. 而其中,服务器返回数据的格式其实是字符串形势,并不是我们想要的json数据格式,在此引用只是为了对比说明 复制代码 代码如下: $.get("dat

  • jquery JSON的解析方式

    这里考虑都考虑的是服务器返回的是JSON形式的字符串的形式,对于利用JSONObject等插件封装的JSON对象,与此亦是大同小异,这里不再做说明. 这里首先给出JSON字符串集,字符串集如下: 复制代码 代码如下: var data=" { root: [ {name:'1',value:'0'}, {name:'6101',value:'西安市'}, {name:'6102',value:'铜川市'}, {name:'6103',value:'宝鸡市'}, {name:'6104',valu

  • js 将json字符串转换为json对象的方法解析

    例如: JSON字符串: var str1 = '{ "name": "cxh", "sex": "man" }'; JSON对象: var str2 = { "name": "cxh", "sex": "man" }; 一.JSON字符串转换为JSON对象 要使用上面的str1,必须使用下面的方法先转化为JSON对象: //由JSON字符串转换为

随机推荐