Json数据可视化
主要借助JSON.stringfy( value [, replacer] [, space] )。
一、参考文献
1、json数据可视化：
http://www.cnblogs.com/lvdabao/p/4204858.html
2、JSON.stringify 函数使用：
https://msdn.microsoft.com/library/cc836459(v=vs.94).aspx
http://www.cnblogs.com/ningvsban/p/3660654.html
二、实现原理
-
必需。要转换的 JavaScript 值（通常为对象或数组）。
- replacer
-
可选。用于转换结果的函数或数组。
如果 replacer 为函数，则 JSON.stringify 将调用该函数，并传入每个成员的键和值。使用返回值而不是原始值。如果此函数返回undefined，则排除成员。根对象的键是一个空字符串：""。
如果 replacer 是一个数组，则仅转换该数组中具有键值的成员。成员的转换顺序与键在数组中的顺序一样。当 value 参数也为数组时，将忽略replacer 数组。
- space
-
可选。向返回值 JSON 文本添加缩进、空格和换行符以使其更易于读取。
如果省略 space，则将生成返回值文本，而没有任何额外空格。
如果 space 是一个数字，则返回值文本在每个级别缩进指定数目的空格。如果 space 大于 10，则文本缩进 10 个空格。
如果 space 是一个非空字符串（例如“\t”），则返回值文本在每个级别中缩进字符串中的字符。
如果 space 是长度大于 10 个字符的字符串，则使用前 10 个字符。
三、代码实现
（一）代码
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 .number{color:#ff0000} 6 .key{color:#0000ff} 7 .string{color:#33dd00} 8 .boolean{color:#ff00ff} 9 .null{color:#00ffff} 10 </style> 11 </head> 12 <body> 13 <script> 14 function output(inp) { 15 document.body.appendChild(document.createElement('pre')).innerHTML = inp; 16 } 17 18 function syntaxHighlight(json) { 19 json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>'); 20 return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) { 21 var cls = 'number'; 22 if (/^"/.test(match)) { 23 if (/:$/.test(match)) { 24 cls = 'key'; 25 } else { 26 cls = 'string'; 27 } 28 } else if (/true|false/.test(match)) { 29 cls = 'boolean'; 30 } else if (/null/.test(match)) { 31 cls = 'null'; 32 } 33 return '<span class="' + cls + '">' + match + '</span>'; 34 }); 35 } 36 37 var obj = {num: 1234,str: '字符串',arr: [1,2,3,4,5,6],obj: { 38 name: 'tom',age: 10,isMale:false, brother:null, 39 like: ['a', 'b',3]} 40 }; 41 function test(valu) 42 { 43 console.log(valu); 44 return valu; 45 } 46 var str = JSON.stringify(obj, undefined, '_____'); 47 48 output(syntaxHighlight(str)); 49 </script> 50 </body> 51 <html>
（二）效果
1、JSON.stringify(obj, undefined, ' ');的效果：
2、JSON.stringify(obj, undefined, '_____');的效果：
