pretty-print JSON using JavaScript

ID : 204

viewed : 258

Tags : javascriptjsonpretty-printjavascript





Top 5 Answer for pretty-print JSON using JavaScript

vote vote

97

Pretty-printing is implemented natively in JSON.stringify(). The third argument enables pretty printing and sets the spacing to use:

var str = JSON.stringify(obj, null, 2); // spacing level = 2 

If you need syntax highlighting, you might use some regex magic like so:

function syntaxHighlight(json) {     if (typeof json != 'string') {          json = JSON.stringify(json, undefined, 2);     }     json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');     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>';     }); } 

See in action here: jsfiddle

Or a full snippet provided below:

function output(inp) {      document.body.appendChild(document.createElement('pre')).innerHTML = inp;  }    function syntaxHighlight(json) {      json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');      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 = {a:1, 'b':'foo', c:[false,'false',null, 'null', {d:{e:1.3e5,f:'1.3e5'}}]};  var str = JSON.stringify(obj, undefined, 4);    output(str);  output(syntaxHighlight(str));
pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; }  .string { color: green; }  .number { color: darkorange; }  .boolean { color: blue; }  .null { color: magenta; }  .key { color: red; }

vote vote

83

User Pumbaa80's answer is great if you have an object you want pretty printed. If you're starting from a valid JSON string that you want to pretty printed, you need to convert it to an object first:

var jsonString = '{"some":"json"}'; var jsonPretty = JSON.stringify(JSON.parse(jsonString),null,2);   

This builds a JSON object from the string, and then converts it back to a string using JSON stringify's pretty print.

vote vote

77

Better way.

Prettify JSON Array in Javascript

JSON.stringify(jsonobj,null,'\t') 
vote vote

63

var jsonObj = {"streetLabel": "Avenue Anatole France", "city": "Paris 07",  "postalCode": "75007", "countryCode": "FRA",  "countryLabel": "France" };  document.getElementById("result-before").innerHTML = JSON.stringify(jsonObj); 

In case of displaying in HTML, you should to add a balise <pre></pre>

document.getElementById("result-after").innerHTML = "<pre>"+JSON.stringify(jsonObj,undefined, 2) +"</pre>" 

Example:

var jsonObj = {"streetLabel": "Avenue Anatole France", "city": "Paris 07",  "postalCode": "75007", "countryCode": "FRA",  "countryLabel": "France" };    document.getElementById("result-before").innerHTML = JSON.stringify(jsonObj);    document.getElementById("result-after").innerHTML = "<pre>"+JSON.stringify(jsonObj,undefined, 2) +"</pre>"
div { float:left; clear:both; margin: 1em 0; }
<div id="result-before"></div>  <div id="result-after"></div>

vote vote

52

Based on Pumbaa80's answer I have modified the code to use the console.log colours (working on Chrome for sure) and not HTML. Output can be seen inside console. You can edit the _variables inside the function adding some more styling.

function JSONstringify(json) {     if (typeof json != 'string') {         json = JSON.stringify(json, undefined, '\t');     }      var          arr = [],         _string = 'color:green',         _number = 'color:darkorange',         _boolean = 'color:blue',         _null = 'color:magenta',         _key = 'color:red';      json = json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {         var style = _number;         if (/^"/.test(match)) {             if (/:$/.test(match)) {                 style = _key;             } else {                 style = _string;             }         } else if (/true|false/.test(match)) {             style = _boolean;         } else if (/null/.test(match)) {             style = _null;         }         arr.push(style);         arr.push('');         return '%c' + match + '%c';     });      arr.unshift(json);      console.log.apply(console, arr); } 

Here is a bookmarklet you can use:

javascript:function JSONstringify(json) {if (typeof json != 'string') {json = JSON.stringify(json, undefined, '\t');}var arr = [],_string = 'color:green',_number = 'color:darkorange',_boolean = 'color:blue',_null = 'color:magenta',_key = 'color:red';json = json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {var style = _number;if (/^"/.test(match)) {if (/:$/.test(match)) {style = _key;} else {style = _string;}} else if (/true|false/.test(match)) {style = _boolean;} else if (/null/.test(match)) {style = _null;}arr.push(style);arr.push('');return '%c' + match + '%c';});arr.unshift(json);console.log.apply(console, arr);};void(0); 

Usage:

var obj = {a:1, 'b':'foo', c:[false,null, {d:{e:1.3e5}}]}; JSONstringify(obj); 

Edit: I just tried to escape the % symbol with this line, after the variables declaration:

json = json.replace(/%/g, '%%'); 

But I find out that Chrome is not supporting % escaping in the console. Strange... Maybe this will work in the future.

Cheers!

enter image description here

Top 3 video Explaining pretty-print JSON using JavaScript







Related QUESTION?