How to visualize json data

How to visualize json data

This article describes how to achieve json data visualization. The core function is JSON. stringify. I didn't expect it. We only use it for serial number json data.

JSON. stringify Function

Converts a JavaScript value to a JavaScript Object Notation (Json) string.

Syntax

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

Parameters

Value

Required. The JavaScript value to be converted (usually an object or array ).

Replacer

Optional. The function or Array Used for the conversion result.

If replacer is a function, JSON. stringify calls this function and passes in the keys and values of each member. Use the return value instead of the original value. If this function returns undefined, the Member is excluded. The root object key is an empty string :"".

If replacer is an array, only members with key values in the array are converted. The conversion sequence of members is the same as that of keys in the array. When the value parameter is an array, the replacer array is ignored.

Space

Optional. Add indentation, spaces, and line breaks to the returned JSON text to make it easier to read.

If space is omitted, the returned text is generated without any extra space.

If space is a number, the returned text is indented at each level to specify the number of spaces. If space is greater than 10, the text is Indented by 10 spaces.

If space is a non-empty string (for example, "\ t"), the returned text is indented to characters in the string at each level.

If space is a string of more than 10 characters, the first 10 characters are used.

Return Value

A string containing JSON text.

Json data visualization

We need to use this third parameter, which can specify how many spaces are added to the generated string to generate a string with a certain format. The generated string can be placed in

Label to display indentation. Then, in order to make the generated data have a highlighted effect, we can also write a simple highlighted function.
This is basically the principle. Please refer to the code implementation:
Function output (indium) {document. body. appendChild (document. createElement ('pre ')). innerHTML = indium;} function syntaxHighlight (json) {json = json. 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 ''+ match +'';});} var obj = {num: 1234, str: 'string ', 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 ));
   
The final result is as follows: