How to display JSON data in HTML

This article describes how to display JSON data, described in the text is very detailed, with some reference value, small partners who are interested must be read in html!

Sometimes we need to display JSON data directly on the page (for example, a project that is being tested, you need to display the results returned by the interface. ), But if the string is displayed directly, it is inconvenient to view. Need to format it.

In fact, json.stringify itself can format JSON, specific usage is:

  Json.stringify (RES, NULL, 2); // RES is the object to be JSON, 2 is spacing  

If you want to look better, add formatted Code and style:

 function syntaxhighlight (json) {if (typeof json! = 'String') {json = Json.stringify (json, undefined, 2);} json = json.replace (/ & / g, '&'). Replace (/  / g, '>); return json.replace (/ (" (\\ u [a-za-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 (/: "ipst(match) {cls = 'key';} else {cls = 'string';}} ​​else} (/true|false/.test() {CLS = 'boolean';} else if (/null/.test( /NULL /.TEST (Match)) {CLS = 'NULL';} Return '</g, '' + MATCH + '';});}   

  pre {Outline: 1PX Solid #ccc; padding: 5px; margin: 5px;} .string {color: green; } .number {color: DARKORANGE;} .boolean {color: blue;} .null {color: magenta;} .key {color: red;}    
HTML code :

  
 
Call code:

$ (‘# Result ‘). HTML (SyntaxHighlight (res));

Effect:
  
How to display all the contents of JSON data in HTML, thank you for reading! The content that wants to share is helpful to everyone, more related knowledge, welcome to pay attention to Tumi Yun Industry News Channel!

© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment