当前位置：首页 > 资讯 > 技术文档

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

时间：2021-01-28 17:15 编辑：来源：阅读：
扫一扫，手机访问

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

[b]前言[/b] 本文介绍的是如何实现json数据可视化，要用到的核心是[code]JSON.stringify[/code]这个函数，没想到吧，平时我们只把它用来序列号json数据。 [b]JSON.stringify 函数[/b] 将 JavaScript 值转换为 JavaScript 对象表示法 (Json) 字符串。 [b]语法[/b]

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

[b]参数[/b] value 必需。要转换的 JavaScript 值（通常为对象或数组）。 replacer 可选。用于转换结果的函数或数组。如果 replacer 为函数，则 [code]JSON.stringify [/code]将调用该函数，并传入每个成员的键和值。使用返回值而不是原始值。如果此函数返回 undefined，则排除成员。根对象的键是一个空字符串：""。如果 replacer 是一个数组，则仅转换该数组中具有键值的成员。成员的转换顺序与键在数组中的顺序一样。当 value 参数也为数组时，将忽略 replacer 数组。 space 可选。向返回值 JSON 文本添加缩进、空格和换行符以使其更易于读取。如果省略 space，则将生成返回值文本，而没有任何额外空格。如果 space 是一个数字，则返回值文本在每个级别缩进指定数目的空格。如果 space 大于 10，则文本缩进 10 个空格。如果 space 是一个非空字符串（例如“\t”），则返回值文本在每个级别中缩进字符串中的字符。如果 space 是长度大于 10 个字符的字符串，则使用前 10 个字符。 [b]返回值[/b] 一个包含 JSON 文本的字符串。 [b]json数据可视化[/b] 我们要用到的就是这第三个参数，它可以指定在生成的字符串中加多少空格，从而生成有一定格式的字符串。生成的字符串我们可以放在<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));

最终生成的效果就是这样的： [img]http://files.jb51.net/file_images/article/201611/20161124110057060.png?201610241114[/img] [b]总结[/b] 以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。

全部评论(0)

上一篇：简明json介绍
下一篇：深入javascript json QQ网页登陆

资讯排行榜
更多>>