3550

How can I display JSON in an easy-to-read (for human readers) format? I'm looking primarily for indentation and whitespace, with perhaps even colors / font-styles / etc.

M--
33.4k12 gold badges74 silver badges115 bronze badges
asked Jan 26, 2011 at 22:33
3
  • 27
    If you're just outputting to html, you can wrap it in a <pre> tag. Commented Mar 30, 2018 at 4:36
  • all answer will work but you have to use javascript :: var str = JSON.stringify(obj, null, 2); in html // <pre id="output_result_div"></pre > Commented Feb 2, 2021 at 13:17
  • Use JSON.stringify(data, null, 2) to format data, then use AceEditor, CodeMirror, or Monaco Editor to display it. Commented Mar 18, 2023 at 11:28

32 Answers 32

1
2
6924
+100

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; }

hassan
8,3282 gold badges28 silver badges40 bronze badges
answered Aug 28, 2011 at 10:56
Sign up to request clarification or add additional context in comments.

7 Comments

Super awesome. I added a function to pop open this in a new window for debugging: var json = syntaxHighlight(JSON.stringify(obj,undefined,4);); var w = window.open(); var html = "<head><style>pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; } .string { color: green; } "; html+= " .number { color: darkorange; } .boolean { color: blue; } .null { color: magenta; } .key { color: red; }</style></head><body>"; html+= "<pre>"+json+"</pre>"; w.document.writeln(html);
Nice. Don't forget it needs css and a <pre>, though.
Note that stringify(...) works on JSON objects, not on JSON strings. If you have a string, you need to JSON.parse(...) first
i built a tool on this sardapv.github.io/json-prettier :)
Hello, this is awesome. It works but I get a lint warning on the second-to-last backslash in the regex- Unnecessary escape character: \- no-useless-escape. I don't have it unit tested so afraid to // eslint-disable-next-line
|
441

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.

Steve Bennett
130k45 gold badges188 silver badges247 bronze badges
answered Jun 21, 2013 at 20:35

2 Comments

Note that when displaying the string you need to wrap it in <pre></pre> tags.
It seems to only work when using textarea, otherwise the newlines don't come in
140

Better way.

Prettify JSON Array in Javascript 

JSON.stringify(jsonobj,null,'\t')
answered Oct 21, 2017 at 10:19

3 Comments

this was great. and as a tip, load the result in <pre>RESULT</pre> to see formatted in html page too.
NOOO! @Saghahi I respectfully disagree: In 2024 (or 2023) I like to think we've moved past tabs. Use 4 spaces if you love tabs.
@Sinjai I respectfully disagree. I remember when spaces were the only thing available in line printers and terminals. Thankfully we’ve moved past that. One of the main benefits of tabs is that you can adjust tab width to anything you like without having to fight over whether it’s 2 spaces or 4. It also means you can comment out lines without having to re-format. If your coding editor doesn’t support that, them of course, you can still use spaces.
84

I think you're looking for something like this :

JSON.stringify(obj, null, '\t');

This "pretty-prints" your JSON string, using a tab for indentation.

If you prefer to use spaces instead of tabs, you could also use a number for the number of spaces you'd like :

JSON.stringify(obj, null, 2);
answered Apr 12, 2022 at 0:44

1 Comment

This duplicates an answer from 2017
70 
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>

brasofilo
26.2k15 gold badges96 silver badges188 bronze badges
answered Mar 1, 2017 at 15:42

1 Comment

It's how to display the JSON string that is created by JSON.stringify(obj) within an HTML document that I was looking for. <pre></pre> is the magic that will display it with indentation and line breaks. Thank you!
47

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

answered Jan 29, 2014 at 13:16

Comments

36

You can use console.dir(), which is a shortcut for console.log(util.inspect()). (The only difference is that it bypasses any custom inspect() function defined on an object.)

It uses syntax-highlighting, smart indentation, removes quotes from keys and just makes the output as pretty as it gets.

const object = JSON.parse(jsonString)
console.dir(object, {depth: null, colors: true})

and for the command line:

cat package.json | node -e "process.stdin.pipe(new stream.Writable({write: chunk => console.dir(JSON.parse(chunk), {depth: null, colors: true})}))"

answered Nov 14, 2015 at 9:46

Comments

29

I use the JSONView Chrome extension (it is as pretty as it gets :):

Edit: added jsonreport.js

I've also released an online stand-alone JSON pretty print viewer, jsonreport.js, that provides a human readable HTML5 report you can use to view any JSON data.

You can read more about the format in New JavaScript HTML5 Report Format .

Tieson T.
21.2k6 gold badges82 silver badges99 bronze badges
answered Jan 26, 2011 at 22:37

Comments

23

If you are using ES5, simply call JSON.stringify with:

  • 2nd arg: replacer; set to null,
  • 3rd arg: space; use tab.
JSON.stringify(anObject, null, '\t');

Source: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

answered Feb 2, 2022 at 8:02

Comments

19

Here's user123444555621's awesome HTML one adapted for terminals. Handy for debugging Node scripts:

function prettyJ(json) {
 if (typeof json !== 'string') {
 json = JSON.stringify(json, undefined, 2);
 }
 return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, 
 function (match) {
 let cls = "\x1b[36m";
 if (/^"/.test(match)) {
 if (/:$/.test(match)) {
 cls = "\x1b[34m";
 } else {
 cls = "\x1b[32m";
 }
 } else if (/true|false/.test(match)) {
 cls = "\x1b[35m"; 
 } else if (/null/.test(match)) {
 cls = "\x1b[31m";
 }
 return cls + match + "\x1b[0m";
 }
 );
}

Usage:

// thing = any json OR string of json
prettyJ(thing);
Benjamin Loison
5,7314 gold badges19 silver badges37 bronze badges
answered Jul 13, 2018 at 7:35

Comments

16

Unsatisfied with other pretty printers for Ruby, I wrote my own (NeatJSON) and then ported it to JavaScript including a free online formatter. The code is free under MIT license (quite permissive).

Features (all optional):

  • Set a line width and wrap in a way that keeps objects and arrays on the same line when they fit, wrapping one value per line when they don't.
  • Sort object keys if you like.
  • Align object keys (line up the colons).
  • Format floating point numbers to specific number of decimals, without messing up the integers.
  • 'Short' wrapping mode puts opening and closing brackets/braces on the same line as values, providing a format that some prefer.
  • Granular control over spacing for arrays and objects, between brackets, before/after colons and commas.
  • Function is made available to both web browsers and Node.js.

I'll copy the source code here so that this is not just a link to a library, but I encourage you to go to the GitHub project page, as that will be kept up-to-date and the code below will not.

(function(exports){
exports.neatJSON = neatJSON;
function neatJSON(value,opts){
 opts = opts || {}
 if (!('wrap' in opts)) opts.wrap = 80;
 if (opts.wrap==true) opts.wrap = -1;
 if (!('indent' in opts)) opts.indent = ' ';
 if (!('arrayPadding' in opts)) opts.arrayPadding = ('padding' in opts) ? opts.padding : 0;
 if (!('objectPadding' in opts)) opts.objectPadding = ('padding' in opts) ? opts.padding : 0;
 if (!('afterComma' in opts)) opts.afterComma = ('aroundComma' in opts) ? opts.aroundComma : 0;
 if (!('beforeComma' in opts)) opts.beforeComma = ('aroundComma' in opts) ? opts.aroundComma : 0;
 if (!('afterColon' in opts)) opts.afterColon = ('aroundColon' in opts) ? opts.aroundColon : 0;
 if (!('beforeColon' in opts)) opts.beforeColon = ('aroundColon' in opts) ? opts.aroundColon : 0;
 var apad = repeat(' ',opts.arrayPadding),
 opad = repeat(' ',opts.objectPadding),
 comma = repeat(' ',opts.beforeComma)+','+repeat(' ',opts.afterComma),
 colon = repeat(' ',opts.beforeColon)+':'+repeat(' ',opts.afterColon);
 return build(value,'');
 function build(o,indent){
 if (o===null || o===undefined) return indent+'null';
 else{
 switch(o.constructor){
 case Number:
 var isFloat = (o === +o && o !== (o|0));
 return indent + ((isFloat && ('decimals' in opts)) ? o.toFixed(opts.decimals) : (o+''));
 case Array:
 var pieces = o.map(function(v){ return build(v,'') });
 var oneLine = indent+'['+apad+pieces.join(comma)+apad+']';
 if (opts.wrap===false || oneLine.length<=opts.wrap) return oneLine;
 if (opts.short){
 var indent2 = indent+' '+apad;
 pieces = o.map(function(v){ return build(v,indent2) });
 pieces[0] = pieces[0].replace(indent2,indent+'['+apad);
 pieces[pieces.length-1] = pieces[pieces.length-1]+apad+']';
 return pieces.join(',\n');
 }else{
 var indent2 = indent+opts.indent;
 return indent+'[\n'+o.map(function(v){ return build(v,indent2) }).join(',\n')+'\n'+indent+']';
 }
 case Object:
 var keyvals=[],i=0;
 for (var k in o) keyvals[i++] = [JSON.stringify(k), build(o[k],'')];
 if (opts.sorted) keyvals = keyvals.sort(function(kv1,kv2){ kv1=kv1[0]; kv2=kv2[0]; return kv1<kv2?-1:kv1>kv2?1:0 });
 keyvals = keyvals.map(function(kv){ return kv.join(colon) }).join(comma);
 var oneLine = indent+"{"+opad+keyvals+opad+"}";
 if (opts.wrap===false || oneLine.length<opts.wrap) return oneLine;
 if (opts.short){
 var keyvals=[],i=0;
 for (var k in o) keyvals[i++] = [indent+' '+opad+JSON.stringify(k),o[k]];
 if (opts.sorted) keyvals = keyvals.sort(function(kv1,kv2){ kv1=kv1[0]; kv2=kv2[0]; return kv1<kv2?-1:kv1>kv2?1:0 });
 keyvals[0][0] = keyvals[0][0].replace(indent+' ',indent+'{');
 if (opts.aligned){
 var longest = 0;
 for (var i=keyvals.length;i--;) if (keyvals[i][0].length>longest) longest = keyvals[i][0].length;
 var padding = repeat(' ',longest);
 for (var i=keyvals.length;i--;) keyvals[i][0] = padRight(padding,keyvals[i][0]);
 }
 for (var i=keyvals.length;i--;){
 var k=keyvals[i][0], v=keyvals[i][1];
 var indent2 = repeat(' ',(k+colon).length);
 var oneLine = k+colon+build(v,'');
 keyvals[i] = (opts.wrap===false || oneLine.length<=opts.wrap || !v || typeof v!="object") ? oneLine : (k+colon+build(v,indent2).replace(/^\s+/,''));
 }
 return keyvals.join(',\n') + opad + '}';
 }else{
 var keyvals=[],i=0;
 for (var k in o) keyvals[i++] = [indent+opts.indent+JSON.stringify(k),o[k]];
 if (opts.sorted) keyvals = keyvals.sort(function(kv1,kv2){ kv1=kv1[0]; kv2=kv2[0]; return kv1<kv2?-1:kv1>kv2?1:0 });
 if (opts.aligned){
 var longest = 0;
 for (var i=keyvals.length;i--;) if (keyvals[i][0].length>longest) longest = keyvals[i][0].length;
 var padding = repeat(' ',longest);
 for (var i=keyvals.length;i--;) keyvals[i][0] = padRight(padding,keyvals[i][0]);
 }
 var indent2 = indent+opts.indent;
 for (var i=keyvals.length;i--;){
 var k=keyvals[i][0], v=keyvals[i][1];
 var oneLine = k+colon+build(v,'');
 keyvals[i] = (opts.wrap===false || oneLine.length<=opts.wrap || !v || typeof v!="object") ? oneLine : (k+colon+build(v,indent2).replace(/^\s+/,''));
 }
 return indent+'{\n'+keyvals.join(',\n')+'\n'+indent+'}'
 }
 default:
 return indent+JSON.stringify(o);
 }
 }
 }
 function repeat(str,times){ // http://stackoverflow.com/a/17800645/405017
 var result = '';
 while(true){
 if (times & 1) result += str;
 times >>= 1;
 if (times) str += str;
 else break;
 }
 return result;
 }
 function padRight(pad, str){
 return (str + pad).substring(0, pad.length);
 }
}
neatJSON.version = "0.5";
})(typeof exports === 'undefined' ? this : exports);
answered Apr 19, 2015 at 21:49

Comments

15

You can use JSON.stringify(your object, null, 2) The second parameter can be used as a replacer function which takes key and Val as parameters.This can be used in case you want to modify something within your JSON object.

more reference : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

answered Jul 12, 2018 at 3:58

Comments

14
Benjamin Loison
5,7314 gold badges19 silver badges37 bronze badges
answered Jan 10, 2013 at 14:11

Comments

10

Quick pretty human-readable JSON output in 1 line code (without colors):

document.documentElement.innerHTML='<pre>'+JSON.stringify(obj, null, 2)+'</pre>';
answered Apr 3, 2022 at 20:12

Comments

9

Thanks a lot @all! Based on the previous answers, here is another variant method providing custom replacement rules as parameter:

 renderJSON : function(json, rr, code, pre){
 if (typeof json !== 'string') {
 json = JSON.stringify(json, undefined, '\t');
 }
 var rules = {
 def : 'color:black;', 
 defKey : function(match){
 return '<strong>' + match + '</strong>';
 },
 types : [
 {
 name : 'True',
 regex : /true/,
 type : 'boolean',
 style : 'color:lightgreen;'
 },
 {
 name : 'False',
 regex : /false/,
 type : 'boolean',
 style : 'color:lightred;'
 },
 {
 name : 'Unicode',
 regex : /"(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?/,
 type : 'string',
 style : 'color:green;'
 },
 {
 name : 'Null',
 regex : /null/,
 type : 'nil',
 style : 'color:magenta;'
 },
 {
 name : 'Number',
 regex : /-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/,
 type : 'number',
 style : 'color:darkorange;'
 },
 {
 name : 'Whitespace',
 regex : /\s+/,
 type : 'whitespace',
 style : function(match){
 return '&nbsp';
 }
 } 
 ],
 keys : [
 {
 name : 'Testkey',
 regex : /("testkey")/,
 type : 'key',
 style : function(match){
 return '<h1>' + match + '</h1>';
 }
 }
 ],
 punctuation : {
 name : 'Punctuation',
 regex : /([,円\.\}\{\[\]])/,
 type : 'punctuation',
 style : function(match){
 return '<p>________</p>';
 }
 }
 };
 if('undefined' !== typeof jQuery){
 rules = $.extend(rules, ('object' === typeof rr) ? rr : {}); 
 }else{
 for(var k in rr ){
 rules[k] = rr[k];
 }
 }
 var str = json.replace(/([,円\.\}\{\[\]]|"(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
 var i = 0, p;
 if (rules.punctuation.regex.test(match)) {
 if('string' === typeof rules.punctuation.style){
 return '<span style="'+ rules.punctuation.style + '">' + match + '</span>';
 }else if('function' === typeof rules.punctuation.style){
 return rules.punctuation.style(match);
 } else{
 return match;
 } 
 }
 if (/^"/.test(match)) {
 if (/:$/.test(match)) {
 for(i=0;i<rules.keys.length;i++){
 p = rules.keys[i];
 if (p.regex.test(match)) {
 if('string' === typeof p.style){
 return '<span style="'+ p.style + '">' + match + '</span>';
 }else if('function' === typeof p.style){
 return p.style(match);
 } else{
 return match;
 } 
 } 
 } 
 return ('function'===typeof rules.defKey) ? rules.defKey(match) : '<span style="'+ rules.defKey + '">' + match + '</span>'; 
 } else {
 return ('function'===typeof rules.def) ? rules.def(match) : '<span style="'+ rules.def + '">' + match + '</span>';
 }
 } else {
 for(i=0;i<rules.types.length;i++){
 p = rules.types[i];
 if (p.regex.test(match)) {
 if('string' === typeof p.style){
 return '<span style="'+ p.style + '">' + match + '</span>';
 }else if('function' === typeof p.style){
 return p.style(match);
 } else{
 return match;
 } 
 } 
 }
 }
 });
 if(true === pre)str = '<pre>' + str + '</pre>';
 if(true === code)str = '<code>' + str + '</code>';
 return str;
 }
Rob ♦
27.4k16 gold badges89 silver badges103 bronze badges
answered Sep 9, 2015 at 7:40

1 Comment

@manking ... rules = $.extend(rules, ('object' === typeof rr) ? rr : {}); ... it is to extend the ruleset by an rulset object. (maybe you find updates: github.com/frdl/-Flow/blob/master/api-d/4/js-api/library.js/… )
9

It works well: 

console.table()

Read more here: https://developer.mozilla.org/pt-BR/docs/Web/API/Console/table

Ricardo Pontual
3,7573 gold badges30 silver badges46 bronze badges
answered Mar 15, 2017 at 11:03

Comments

7

Here is a simple JSON format/color component written in React:

const HighlightedJSON = ({ json }: Object) => {
 const highlightedJSON = jsonObj =>
 Object.keys(jsonObj).map(key => {
 const value = jsonObj[key];
 let valueType = typeof value;
 const isSimpleValue =
 ["string", "number", "boolean"].includes(valueType) || !value;
 if (isSimpleValue && valueType === "object") {
 valueType = "null";
 }
 return (
 <div key={key} className="line">
 <span className="key">{key}:</span>
 {isSimpleValue ? (
 <span className={valueType}>{`${value}`}</span>
 ) : (
 highlightedJSON(value)
 )}
 </div>
 );
 });
 return <div className="json">{highlightedJSON(json)}</div>;
};

See it working in this CodePen: https://codepen.io/benshope/pen/BxVpjo

Hope that helps!

answered May 13, 2018 at 7:36

Comments

6

Here's something to spruce up this oldie but goodie question. What if you want to dump a formatted object to console but it keeps dumping like a wrapped mess with hidden chars like this???

'{\n "_id": "630577bba145ff4f1",\n "role": "user"}'

But you want this loveliness??:

{
 "_id": "630557672d877bba145ff4f1",
 "role": "user"
}

The trick is To wrap your JSON.stringify() in a console.log() statement. If you hate typing, try building the snippet to do the heavy lifting...

This is really useful if you're working with big objects.

add a snippet to your 'Snippets' section in browser dev tools like this (more...):

let o = <object to print>
console.log(JSON.stringify(o, null, 4))
console.log(o)

then simply replace with your object (which will be available from the current context) and run the snippet.

answered Jan 4, 2023 at 20:23

Comments

6

Couldn't find any solution that had good syntax highlighting for the console, so here's my 2p

Install & Add cli-highlight dependency

npm install cli-highlight --save //or use "yarn add"

Define logjson globally

const highlight = require('cli-highlight').highlight
console.logjson = (obj) => console.log(
 highlight( JSON.stringify(obj, null, 4), 
 { language: 'json', ignoreIllegals: true } ));

Use

console.logjson({foo: "bar", someArray: ["string1", "string2"]});

output

answered Jan 8, 2019 at 18:05

Comments

5

If you're looking for a nice library to prettify json on a web page...

Prism.js is pretty good.

http://prismjs.com/

I found using JSON.stringify(obj, undefined, 2) to get the indentation, and then using prism to add a theme was a good approach.

If you're loading in JSON via an ajax call, then you can run one of Prism's utility methods to prettify

For example:

Prism.highlightAll()
answered Nov 19, 2017 at 16:24

Comments

5

I'd like to show my jsonAnalyze method here, it does a pretty print of the JSON structure only, but in some cases can be more usefull that printing the whole JSON.

Say you have a complex JSON like this:

let theJson = {
'username': 'elen',
'email': '[email protected]',
'state': 'married',
'profiles': [
 {'name': 'elenLove', 'job': 'actor' },
 {'name': 'elenDoe', 'job': 'spy'}
],
'hobbies': ['run', 'movies'],
'status': {
 'home': { 
 'ownsHome': true,
 'addresses': [
 {'town': 'Mexico', 'address': '123 mexicoStr'},
 {'town': 'Atlanta', 'address': '4B atlanta 45-48'},
 ]
 },
 'car': {
 'ownsCar': true,
 'cars': [
 {'brand': 'Nissan', 'plate': 'TOKY-114', 'prevOwnersIDs': ['4532354531', '3454655344', '5566753422']},
 {'brand': 'Benz', 'plate': 'ELEN-1225', 'prevOwnersIDs': ['4531124531', '97864655344', '887666753422']}
 ]
 }
},
'active': true,
'employed': false,
};

Then the method will return the structure like this:

username
email
state
profiles[]
 profiles[].name
 profiles[].job
hobbies[]
status{}
 status{}.home{}
 status{}.home{}.ownsHome
 status{}.home{}.addresses[]
 status{}.home{}.addresses[].town
 status{}.home{}.addresses[].address
 status{}.car{}
 status{}.car{}.ownsCar
 status{}.car{}.cars[]
 status{}.car{}.cars[].brand
 status{}.car{}.cars[].plate
 status{}.car{}.cars[].prevOwnersIDs[]
active
employed

So this is the jsonAnalyze() code:

function jsonAnalyze(obj) {
 let arr = [];
 analyzeJson(obj, null, arr);
 return logBeautifiedDotNotation(arr);
 function analyzeJson(obj, parentStr, outArr) {
 let opt;
 if (!outArr) {
 return "no output array given"
 }
 for (let prop in obj) {
 opt = parentStr ? parentStr + '.' + prop : prop;
 if (Array.isArray(obj[prop]) && obj[prop] !== null) {
 let arr = obj[prop];
 if ((Array.isArray(arr[0]) || typeof arr[0] == "object") && arr[0] != null) { 
 outArr.push(opt + '[]');
 analyzeJson(arr[0], opt + '[]', outArr);
 } else {
 outArr.push(opt + '[]');
 }
 } else if (typeof obj[prop] == "object" && obj[prop] !== null) {
 outArr.push(opt + '{}');
 analyzeJson(obj[prop], opt + '{}', outArr);
 } else {
 if (obj.hasOwnProperty(prop) && typeof obj[prop] != 'function') {
 outArr.push(opt);
 }
 }
 }
 }
 function logBeautifiedDotNotation(arr) {
 retStr = '';
 arr.map(function (item) {
 let dotsAmount = item.split(".").length - 1;
 let dotsString = Array(dotsAmount + 1).join(' ');
 retStr += dotsString + item + '\n';
 console.log(dotsString + item)
 });
 return retStr;
 }
}
jsonAnalyze(theJson);
Dharman ♦
33.9k27 gold badges103 silver badges154 bronze badges
answered Feb 2, 2021 at 14:04

Comments

4

Douglas Crockford's JSON in JavaScript library will pretty print JSON via the stringify method.

You may also find the answers to this older question useful: How can I pretty-print JSON in (unix) shell script?

answered Feb 19, 2011 at 5:17

Comments

4

If you need this to work in a textarea the accepted solution will not work.

<textarea id='textarea'></textarea>

$("#textarea").append(formatJSON(JSON.stringify(jsonobject),true)); 

function formatJSON(json,textarea) {
 var nl;
 if(textarea) {
 nl = "&#13;&#10;";
 } else {
 nl = "<br>";
 }
 var tab = "&#160;&#160;&#160;&#160;";
 var ret = "";
 var numquotes = 0;
 var betweenquotes = false;
 var firstquote = false;
 for (var i = 0; i < json.length; i++) {
 var c = json[i];
 if(c == '"') {
 numquotes ++;
 if((numquotes + 2) % 2 == 1) {
 betweenquotes = true;
 } else {
 betweenquotes = false;
 }
 if((numquotes + 3) % 4 == 0) {
 firstquote = true;
 } else {
 firstquote = false;
 }
 }
 if(c == '[' && !betweenquotes) {
 ret += c;
 ret += nl;
 continue;
 }
 if(c == '{' && !betweenquotes) {
 ret += tab;
 ret += c;
 ret += nl;
 continue;
 }
 if(c == '"' && firstquote) {
 ret += tab + tab;
 ret += c;
 continue;
 } else if (c == '"' && !firstquote) {
 ret += c;
 continue;
 }
 if(c == ',' && !betweenquotes) {
 ret += c;
 ret += nl;
 continue;
 }
 if(c == '}' && !betweenquotes) {
 ret += nl;
 ret += tab;
 ret += c;
 continue;
 }
 if(c == ']' && !betweenquotes) {
 ret += nl;
 ret += c;
 continue;
 }
 ret += c;
 } // i loop
 return ret;
}
answered Apr 5, 2017 at 0:13

Comments

4

I ran into an issue today with @Pumbaa80's code. I'm trying to apply JSON syntax highlighting to data that I'm rendering in a Mithril view, so I need to create DOM nodes for everything in the JSON.stringify output.

I split the really long regex into its component parts as well.

render_json = (data) ->
 # wraps JSON data in span elements so that syntax highlighting may be
 # applied. Should be placed in a `whitespace: pre` context
 if typeof(data) isnt 'string'
 data = JSON.stringify(data, undefined, 2)
 unicode = /"(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?/
 keyword = /\b(true|false|null)\b/
 whitespace = /\s+/
 punctuation = /[,.}{\[\]]/
 number = /-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/
 syntax = '(' + [unicode, keyword, whitespace,
 punctuation, number].map((r) -> r.source).join('|') + ')'
 parser = new RegExp(syntax, 'g')
 nodes = data.match(parser) ? []
 select_class = (node) ->
 if punctuation.test(node)
 return 'punctuation'
 if /^\s+$/.test(node)
 return 'whitespace'
 if /^\"/.test(node)
 if /:$/.test(node)
 return 'key'
 return 'string'
 if /true|false/.test(node)
 return 'boolean'
 if /null/.test(node)
 return 'null'
 return 'number'
 return nodes.map (node) ->
 cls = select_class(node)
 return Mithril('span', {class: cls}, node)

Code in context on Github here

Mehdi Dehghani
11.7k6 gold badges64 silver badges68 bronze badges
answered May 15, 2014 at 23:07

Comments

3

With Typescript now, you can attach custom functions to global objects.

  • remember to declare in the main index file at the top

index.ts

declare global {
 interface JSON {
 prettyPrint: (obj: any) => void;
 }
}
JSON.prettyPrint = function (obj) {
 console.log(JSON.stringify(obj, null, 2));
};

other files

JSON.prettyPrint({ a: 1, b: 3 })

prints

{
 "a": 1,
 "b": 3
}
answered Sep 21, 2023 at 13:23

Comments

3

based on @user123444555621, just slightly more modern.

const clsMap = [
 [/^".*:$/, "key"],
 [/^"/, "string"],
 [/true|false/, "boolean"],
 [/null/, "key"],
 [/.*/, "number"],
]
const syntaxHighlight = obj => JSON.stringify(obj, null, 4)
 .replace(/&/g, '&amp;')
 .replace(/</g, '&lt;')
 .replace(/>/g, '&gt;')
 .replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, match => `<span class="${clsMap.find(([regex]) => regex.test(match))[1]}">${match}</span>`);

you can also specify the colors inside js (no CSS needed)

const clsMap = [
 [/^".*:$/, "red"],
 [/^"/, "green"],
 [/true|false/, "blue"],
 [/null/, "magenta"],
 [/.*/, "darkorange"],
]
const syntaxHighlight = obj => JSON.stringify(obj, null, 4)
 .replace(/&/g, '&amp;')
 .replace(/</g, '&lt;')
 .replace(/>/g, '&gt;')
 .replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, match => `<span style="color:${clsMap.find(([regex]) => regex.test(match))[1]}">${match}</span>`);

and a version with less regex

const clsMap = [
 [match => match.startsWith('"') && match.endsWith(':'), "red"],
 [match => match.startsWith('"'), "green"],
 [match => match === "true" || match === "false" , "blue"],
 [match => match === "null", "magenta"],
 [() => true, "darkorange"],
];
 
const syntaxHighlight = obj => JSON.stringify(obj, null, 4)
 .replace(/&/g, '&amp;')
 .replace(/</g, '&lt;')
 .replace(/>/g, '&gt;')
 .replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, match => `<span style="color:${clsMap.find(([fn]) => fn(match))[1]}">${match}</span>`);
Benjamin Loison
5,7314 gold badges19 silver badges37 bronze badges
answered Jun 2, 2021 at 9:32

Comments

2

This is nice:

https://github.com/mafintosh/json-markup from mafintosh

const jsonMarkup = require('json-markup')
const html = jsonMarkup({hello:'world'})
document.querySelector('#myElem').innerHTML = html

HTML

<link ref="stylesheet" href="style.css">
<div id="myElem></div>

Example stylesheet can be found here

https://raw.githubusercontent.com/mafintosh/json-markup/master/style.css
answered Dec 22, 2016 at 22:14

Comments

2

To highlight and beautify it in HTML using Bootstrap:

function prettifyJson(json, prettify) {
 if (typeof json !== 'string') {
 if (prettify) {
 json = JSON.stringify(json, undefined, 4);
 } else {
 json = JSON.stringify(json);
 }
 }
 return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g,
 function(match) {
 let cls = "<span>";
 if (/^"/.test(match)) {
 if (/:$/.test(match)) {
 cls = "<span class='text-danger'>";
 } else {
 cls = "<span>";
 }
 } else if (/true|false/.test(match)) {
 cls = "<span class='text-primary'>";
 } else if (/null/.test(match)) {
 cls = "<span class='text-info'>";
 }
 return cls + match + "</span>";
 }
 );
}
Pepijn Olivier
9761 gold badge19 silver badges32 bronze badges
answered Nov 11, 2019 at 8:15

Comments

2 
<!-- here is a complete example pretty print with more space between lines-->
<!-- be sure to pass a json string not a json object -->
<!-- use line-height to increase or decrease spacing between json lines -->
<style type="text/css">
.preJsonTxt{
 font-size: 18px;
 text-overflow: ellipsis;
 overflow: hidden;
 line-height: 200%;
}
.boxedIn{
 border: 1px solid black;
 margin: 20px;
 padding: 20px;
}
</style>
<div class="boxedIn">
 <h3>Configuration Parameters</h3>
 <pre id="jsonCfgParams" class="preJsonTxt">{{ cfgParams }}</pre>
</div>
<script language="JavaScript">
$( document ).ready(function()
{
 $(formatJson);
 <!-- this will do a pretty print on the json cfg params -->
 function formatJson() {
 var element = $("#jsonCfgParams");
 var obj = JSON.parse(element.text());
 element.html(JSON.stringify(obj, undefined, 2));
 }
});
</script>
Benjamin Loison
5,7314 gold badges19 silver badges37 bronze badges
answered Jul 31, 2019 at 20:25

Comments

1

it's for Laravel, Codeigniter Html: <pre class="jsonPre"> </pre>

Controller: Return the JSON value from the controller as like as

return json_encode($data, JSON_PRETTY_PRINT);

In script: <script> $('.jsonPre').html(result); </script>

result will be

result will be

answered Sep 21, 2021 at 12:57

Comments

1
2

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.