3547

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--
32.8k12 gold badges74 silver badges114 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
6918
+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
7
  • 35
    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); Commented Jul 30, 2012 at 2:07
  • 51
    Nice. Don't forget it needs css and a <pre>, though. Commented Jun 4, 2013 at 5:37
  • 114
    Note that stringify(...) works on JSON objects, not on JSON strings. If you have a string, you need to JSON.parse(...) first Commented Aug 5, 2014 at 12:40
  • 2
    i built a tool on this sardapv.github.io/json-prettier :) Commented Jul 3, 2021 at 10:47
  • 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 Commented Jun 6, 2022 at 22:03
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
129k45 gold badges188 silver badges247 bronze badges
answered Jun 21, 2013 at 20:35
2
  • 55
    Note that when displaying the string you need to wrap it in <pre></pre> tags. Commented Feb 10, 2017 at 16:05
  • It seems to only work when using textarea, otherwise the newlines don't come in Commented Nov 7, 2021 at 2:11
140

Better way.

Prettify JSON Array in Javascript 

JSON.stringify(jsonobj,null,'\t')
answered Oct 21, 2017 at 10:19
2
  • 5
    this was great. and as a tip, load the result in <pre>RESULT</pre> to see formatted in html page too. Commented Mar 28, 2023 at 3:02
  • 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. Commented May 20, 2024 at 2:30
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
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 badges95 silver badges187 bronze badges
answered Mar 1, 2017 at 15:42
1
  • 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! Commented Sep 21, 2024 at 3:27
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
0
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
0
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.3k6 gold badges82 silver badges99 bronze badges
answered Jan 26, 2011 at 22:37
0
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
0
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,7324 gold badges19 silver badges37 bronze badges
answered Jul 13, 2018 at 7:35
0
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
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
0
14
Benjamin Loison
5,7324 gold badges19 silver badges37 bronze badges
answered Jan 10, 2013 at 14:11
0
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
0
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
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
0
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
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
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
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
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 badges153 bronze badges
answered Feb 2, 2021 at 14:04
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
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
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
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
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,7324 gold badges19 silver badges37 bronze badges
answered Jun 2, 2021 at 9:32
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
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
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,7324 gold badges19 silver badges37 bronze badges
answered Jul 31, 2019 at 20:25
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
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.