如何实现json数据可视化

序

介绍了如何实现json数据可视化，其核心是函数json.stringify，没想到的是，我们通常只对序列号json数据使用。

JSON.stringify函数

将JavaScript值转换为JavaScript对象符号(Json)字符串。

语法

JSON。Stringify (value [，replacer] [，space])参数

价值

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

替代者

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

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

如果replacer是数组，则只转换数组中具有键值的成员。成员的转换顺序与数组中的键相同。当value参数也是数组时，将忽略replacer数组。

空间

可选。在返回的JSON文本中添加缩进、空格和换行符，以便于阅读。

如果省略空格，将生成不带任何额外空格的返回值文本。

如果空格是一个数字，返回值文本将在每一级缩进指定数量的空格。如果空格大于10，文本将缩进10个空格。

如果空格是非空字符串(例如，“\t”)，返回值文本将缩进到字符串中每一级的字符中。

如果空格是长度超过10个字符的字符串，则使用前10个字符。

返回值

包含JSON文本的字符串。

Json数据可视化

我们需要的是这个第三个参数，它可以指定生成的字符串要加多少空格，从而生成一定格式的字符串。我们可以将生成的字符串放在pre标签中，这样缩进就可以很好地显示出来。然后，为了突出显示生成的数据，我们还可以编写一个简单的突出显示函数。

这是基本原理，请看代码实现：

函数输出(InP){ document . body . appendchild(document . create element(' pre '))。innerHTML=inp}函数syntaxHighlight(JSON){ JSON=JSON . replace(//g ' ')。替换(//g ' ')。替换(///g，")；返回json.replace(/('(\\u[a-za-z0-9]{4}|\\[^u]|[^\\'])*'(\s*:)？|\b(true|false|null)\b|-？\d(？\.\d*)？(?[eE][ \-]？\d)？)/g，函数(match){ var cls=' number '；if (/^'/.test(match)) { if (/:$/。测试(匹配)){ cls=' key} else { cls=' string} } else if (/true|false/。test(match)) { cls='布尔值'；} else if (/null/。test(match)){ cls=' null '；}返回“span class=”“cls”“match ”/span；});}var obj={num: 1234，str:' string '，arr : [1，2，3，4，5，6]，obj : {name :' Tom '，age 3360 10，like : ['a '，var str=JSON.stringify(obj，undefined，4)；输出(语法高亮(字符串))；最后的结果是这样的：

摘要

以上就是本文的全部内容。希望这篇文章的内容对你的学习或工作有所帮助。有问题可以留言交流。