Json数据可视化
2016-02-26 16:59
281 查看
主要借助JSON.stringfy( value [, replacer] [, space] )。
/article/4967271.html
2、JSON.stringify 函数使用:
https://msdn.microsoft.com/library/cc836459(v=vs.94).aspx
/article/4992792.html
参数:
value
必需。要转换的 JavaScript 值(通常为对象或数组)。
replacer
可选。用于转换结果的函数或数组。
如果 replacer 为函数,则 JSON.stringify 将调用该函数,并传入每个成员的键和值。使用返回值而不是原始值。如果此函数返回undefined,则排除成员。根对象的键是一个空字符串:""。
如果 replacer 是一个数组,则仅转换该数组中具有键值的成员。成员的转换顺序与键在数组中的顺序一样。当 value 参数也为数组时,将忽略replacer 数组。
space
可选。向返回值 JSON 文本添加缩进、空格和换行符以使其更易于读取。
如果省略 space,则将生成返回值文本,而没有任何额外空格。
如果 space 是一个数字,则返回值文本在每个级别缩进指定数目的空格。如果 space 大于 10,则文本缩进 10 个空格。
如果 space 是一个非空字符串(例如“\t”),则返回值文本在每个级别中缩进字符串中的字符。
如果 space 是长度大于 10 个字符的字符串,则使用前 10 个字符。
View Code
2、JSON.stringify(obj, undefined, '_____');的效果:
一、参考文献
1、json数据可视化:/article/4967271.html
2、JSON.stringify 函数使用:
https://msdn.microsoft.com/library/cc836459(v=vs.94).aspx
/article/4992792.html
二、实现原理
JSON.stringfy( 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 个字符。
三、代码实现
(一)代码
<!DOCTYPE html> <html> <head> <style> .number{color:#ff0000} .key{color:#0000ff} .string{color:#33dd00} .boolean{color:#ff00ff} .null{color:#00ffff} </style> </head> <body> <script> 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,isMale:false, brother:null, like: ['a', 'b',3]} }; function test(valu) { console.log(valu); return valu; } var str = JSON.stringify(obj, undefined, '_____'); output(syntaxHighlight(str)); </script> </body> <html>
View Code
(二)效果
1、JSON.stringify(obj, undefined, ' ');的效果:2、JSON.stringify(obj, undefined, '_____');的效果:
相关文章推荐
- js乱码
- js修改时间
- 在 Eclipse 中使用 JSHint 检查 JavaScript 代码
- js代码不运行
- html js highcharts绘制圆饼图表
- js参数中有回车时js不起作用
- js打开新页面
- JS生成二维码,允许中文转码
- 父页面调用iframe中的js方法
- javascript 浏览器兼容性写法
- JS格式化数字金额用逗号隔开保留两位小数
- js获取select选中的值
- 老李分享: JSON
- cobbler 修改 distro_signatures.json
- Javascript基础学习(3)_对象和数组
- JS中判断JSON数据是否存在某字段的方法 JavaScript中判断json中是否有某个字段
- 使用PhantomJS抓取页面的ajax信息
- a 标签作为按钮执行js时,如何避免链接出现#
- MVC控制下输出图片、javascript与json格式
- Javascript基础学习(2)_表达式和运算符