Come posso stampare abbastanza JSON usando JavaScript?

Come posso visualizzare JSON in un formato di facile lettura (per lettori umani)? Sto cercando principalmente rientri e spazi vuoti, con forse anche colors / stili di carattere / ecc.

Pretty-printing è implementato in modo nativo in JSON.stringify() . Il terzo argomento abilita la stampa carina e imposta la spaziatura da usare:

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

Se hai bisogno dell’evidenziazione della syntax, potresti usare qualche regex magic in questo modo:

 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-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 + ''; }); } 

Vedi in azione qui: jsfiddle

O uno snippet completo fornito di seguito:

 function output(inp) { document.body.appendChild(document.createElement('pre')).innerHTML = inp; } 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 = {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; } 

La risposta dell’utente Pumbaa80 è ottima se hai un object che vuoi stampare bene. Se stai iniziando da una stringa JSON valida che vuoi stampare bene, devi prima convertirla in un object:

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

Questo crea un object JSON dalla stringa e quindi lo converte in una stringa usando la bella stampa di JSON stringify.

Sulla base della risposta di Pumbaa80 ho modificato il codice per usare i colors console.log (lavorando su Chrome di sicuro) e non con HTML. L’uscita può essere vista all’interno della console. Puoi modificare le variabili _ all’interno della funzione aggiungendo un po ‘di stile.

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

Ecco un bookmarklet che puoi utilizzare:

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

Uso:

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

Modifica: ho appena provato a sfuggire al simbolo% con questa riga, dopo la dichiarazione delle variabili:

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

Ma scopro che Chrome non supporta% escape nella console. Strano … Forse funzionerà in futuro.

Saluti!

inserisci la descrizione dell'immagine qui

Io uso l’ estensione di Chrome JSONView (è bella come si ottiene :):

Modifica: aggiunto jsonreport.js

Ho anche rilasciato un visualizzatore indipendente di stampe JSON per la stampa stand-alone, jsonreport.js, che fornisce un report HTML5 leggibile dall’uomo che è ansible utilizzare per visualizzare qualsiasi dato JSON.

Puoi leggere ulteriori informazioni sul formato nel nuovo formato di report HTML5 JavaScript .

È ansible utilizzare console.dir() , che è una scorciatoia per console.log(util.inspect()) . (L’unica differenza è che ignora qualsiasi funzione personalizzata inspect() definita su un object.)

Usa l’ evidenziazione della syntax , il rientro intelligente , rimuove le virgolette dalle chiavi e rende l’output altrettanto grazioso.

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

e per la riga di comando:

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

Modo migliore.

Prettify JSON Array in Javascript

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

In caso di visualizzazione in HTML, è necessario aggiungere una balise


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

"

Esempio:

 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 = "
"+JSON.stringify(jsonObj,undefined, 2) +"

"

 div { float:left; clear:both; margin: 1em 0; } 
 

Insoddisfatto di altre graziose stampanti per Ruby, ho scritto il mio ( NeatJSON ) e poi lo ho portato su JavaScript incluso un formattatore online gratuito . Il codice è gratuito sotto licenza MIT (abbastanza permissivo).

Funzionalità (tutte opzionali):

  • Imposta una larghezza e un avvolgimento della linea in modo da mantenere gli oggetti e gli array sulla stessa linea quando si adattano, avvolgendo un valore per riga quando non lo fanno.
  • Ordina le chiavi dell’object se vuoi.
  • Allinea le chiavi object (allinea i due punti).
  • Formatta i numeri in virgola mobile su un numero specifico di decimali, senza rovinare gli interi.
  • La modalità di avvolgimento ‘Breve’ mette le parentesi graffe di apertura e di chiusura sulla stessa linea dei valori, fornendo un formato che alcuni preferiscono.
  • Controllo granulare su spaziatura per matrici e oggetti, tra parentesi, prima / dopo due punti e virgole.
  • La funzione è disponibile per entrambi i browser Web e Node.js.

Copierò qui il codice sorgente in modo che questo non sia solo un collegamento a una biblioteca, ma ti incoraggio a visitare la pagina del progetto GitHub , poiché verrà mantenuta aggiornata e il codice sottostante non lo sarà.

 (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 kv1kv2?1:0 }); keyvals = keyvals.map(function(kv){ return kv.join(colon) }).join(comma); var oneLine = indent+"{"+opad+keyvals+opad+"}"; if (opts.wrap===false || oneLine.lengthkv2?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 kv1kv2?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); 

Grazie mille a tutti! In base alle risposte precedenti, ecco un altro metodo di variante che fornisce regole di sostituzione personalizzate come parametro:

  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 '' + match + ''; }, 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 '

' + match + '

'; } } ], punctuation : { name : 'Punctuation', regex : /([\,\.\}\{\[\]])/, type : 'punctuation', style : function(match){ return '

________

'; } } }; 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 '' + match + ''; }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' + match + ''; }else if('function' === typeof p.style){ return p.style(match); } else{ return match; } } } return ('function'===typeof rules.defKey) ? rules.defKey(match) : '' + match + ''; } else { return ('function'===typeof rules.def) ? rules.def(match) : '' + match + ''; } } else { for(i=0;i' + match + ''; }else if('function' === typeof p.style){ return p.style(match); } else{ return match; } } } } }); if(true === pre)str = '
' + str + '

'; if(true === code)str = '' + str + ''; return str; }

Il JSON di Douglas Crockford nella libreria JavaScript sarà in grado di stampare JSON tramite il metodo stringify.

Potresti anche trovare utili le risposte a questa vecchia domanda: Come posso stampare in modo abbastanza preciso JSON nello script di shell (unix)?

Funziona bene:

 console.table() 

Maggiori informazioni qui: https://developer.mozilla.org/pt-BR/docs/Web/API/Console/table

Ho incontrato un problema oggi con il codice di @ Pumbaa80. Sto cercando di applicare l’evidenziazione della syntax JSON ai dati che sto visualizzando in una vista di Mithril , quindi ho bisogno di creare nodes DOM per tutto ciò che è JSON.stringify nell’output di JSON.stringify .

Ho diviso la regex molto lunga anche nelle sue parti componenti.

 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) 

Codice nel contesto su Github qui

Se hai bisogno che funzioni in una textarea, la soluzione accettata non funzionerà.

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

 function formatJSON(json,textarea) { var nl; if(textarea) { nl = "
"; } else { nl = "
"; } var tab = "    "; 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; }

Ecco un semplice componente di formato / colore JSON scritto 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 ( 
{key}: {isSimpleValue ? ( {`${value}`} ) : ( highlightedJSON(value) )}
); }); return
{highlightedJSON(json)}
; };

Guardalo mentre lavora in questo CodePen: https://codepen.io/benshope/pen/BxVpjo

Spero possa aiutare!

Puoi usare JSON.stringify (il tuo object, null, 2) Il secondo parametro può essere usato come una funzione di replacer che prende chiave e Val come parametri. Questo può essere usato nel caso tu voglia modificare qualcosa all’interno dell’object JSON.

Ecco l’eccezionale HTML di user123444555621 adattato per i terminali. Comodo per il debug degli script di nodo:

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

Uso:

 // thing = any json OR string of json prettyJ(thing); 

Raccomando l’uso di HighlightJS . Utilizza lo stesso principio della risposta accettata, ma funziona anche per molte altre lingue e ha molti schemi di colors predefiniti . Se si utilizza RequireJS , è ansible generare un modulo compatibile con

 python3 tools/build.py -tamd json xml  

La generazione si basa su Python3 e Java. Aggiungi -n per generare una versione non minificata.

Questo è carino:

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

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

HTML

  

Se stai cercando una bella libreria per migliorare JSON su una pagina web …

Prism.js è abbastanza buono.

http://prismjs.com/

Ho trovato l’uso di JSON.stringify (obj, undefined, 2) per ottenere il rientro, e quindi usare il prisma per aggiungere un tema era un buon approccio.

Se stai caricando in JSON tramite una chiamata ajax, puoi eseguire uno dei metodi di utilità di Prism per migliorare

Per esempio:

 Prism.highlightAll() 

Ecco come è ansible stampare senza utilizzare la funzione nativa.

 function pretty(ob, lvl = 0) { let temp = []; if(typeof ob === "object"){ for(let x in ob) { if(ob.hasOwnProperty(x)) { temp.push( getTabs(lvl+1) + x + ":" + pretty(ob[x], lvl+1) ); } } return "{\n"+ temp.join(",\n") +"\n" + getTabs(lvl) + "}"; } else { return ob; } } function getTabs(n) { let c = 0, res = ""; while(c++ < n) res+="\t"; return res; } let obj = {a: {b: 2}, x: {y: 3}}; console.log(pretty(obj)); /* { a: { b: 2 }, x: { y: 3 } } */ 

Il modo più semplice per visualizzare un object a scopo di debug:

 console.log("data",data) // lets you unfold the object manually 

Se vuoi visualizzare l’object nel DOM, dovresti considerare che potrebbe contenere stringhe che verrebbero interpretate come HTML. Pertanto, è necessario fare un po ‘di fuga …

 var s = JSON.stringify(data,null,2) // format var e = new Option(s).innerHTML // escape document.body.insertAdjacentHTML('beforeend','
'+e+'

') // display

Se si utilizza net.sf.json, è ansible stampare come segue (utilizzando un rientro di 4 spazi):

 JSONObject work = JSONObject.fromObject("{\"hi\":\"there\",\"more\":\"stuff\"}"); log.info("WORK="+work.toString(4)); 

Usa Newtonsoft.Json dll. questo funziona bene in IE e Chrome

metti questo codice nella tua vista del razor

  if (Model.YourJsonSting!= null) { 
  @JToken.Parse(Model.YourJsonSting).ToString(Formatting.Indented)  

}