Wie kann ich JSON in einem einfach zu lesenden Format (für menschliche Leser) anzeigen? Ich suche hauptsächlich Einrückungen und Leerzeichen, vielleicht sogar Farben / Schriftstile / etc.
<pre>
Tag einschließen.
Wie kann ich JSON in einem einfach zu lesenden Format (für menschliche Leser) anzeigen? Ich suche hauptsächlich Einrückungen und Leerzeichen, vielleicht sogar Farben / Schriftstile / etc.
<pre>
Tag einschließen.
Antworten:
Pretty-Printing wird nativ in implementiertJSON.stringify()
. Das dritte Argument ermöglicht ein hübsches Drucken und legt den zu verwendenden Abstand fest:
var str = JSON.stringify(obj, null, 2); // spacing level = 2
Wenn Sie eine Syntaxhervorhebung benötigen, können Sie Regex-Magie wie folgt verwenden:
function syntaxHighlight(json) {
if (typeof json != 'string') {
json = JSON.stringify(json, undefined, 2);
}
json = json.replace(/&/g, '&').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 '<span class="' + cls + '">' + match + '</span>';
});
}
Sehen Sie hier in Aktion: jsfiddle
Oder ein vollständiger Ausschnitt unten:
<pre>
.
#transactionResponse
Element white-space: pre;
einen CSS-Stil hat.
stringify(...)
für JSON- Objekte und nicht für JSON-Zeichenfolgen funktioniert . Wenn Sie eine Zeichenfolge haben, müssen Sie JSON.parse(...)
zuerst
Die Antwort von Benutzer Pumbaa80 ist großartig, wenn Sie ein Objekt haben, das Sie schön drucken möchten. Wenn Sie von einer gültigen JSON- Zeichenfolge ausgehen , die Sie hübsch drucken möchten, müssen Sie sie zuerst in ein Objekt konvertieren:
var jsonString = '{"some":"json"}';
var jsonPretty = JSON.stringify(JSON.parse(jsonString),null,2);
Dadurch wird ein JSON-Objekt aus der Zeichenfolge erstellt und anschließend mithilfe des hübschen Drucks von JSON stringify wieder in eine Zeichenfolge konvertiert.
JSON.parse
so dass ich ihn modifizierte JSON.stringify(jsonString, null, 2)
. Hängt von Ihrem JSON / Objekt ab.
<pre></pre>
Tags einschließen müssen.
JSON.parse
stirbt nur, wenn Sie eine ungültige JSON- Zeichenfolge haben oder diese bereits in ein Objekt konvertiert ist. Stellen Sie sicher, dass Sie wissen, mit welchem Datentyp Sie es zu tun haben, bevor Sie versuchenJSON.parse
Basierend auf der Antwort von Pumbaa80 habe ich den Code so geändert, dass die Farben console.log (die sicher auf Chrome funktionieren) und nicht HTML verwendet werden. Die Ausgabe kann in der Konsole angezeigt werden. Sie können die _Variablen in der Funktion bearbeiten und etwas mehr Stil hinzufügen.
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);
}
Hier ist ein Lesezeichen, das Sie verwenden können:
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);
Verwendungszweck:
var obj = {a:1, 'b':'foo', c:[false,null, {d:{e:1.3e5}}]};
JSONstringify(obj);
Bearbeiten: Ich habe gerade versucht, das% -Symbol mit dieser Zeile nach der Variablendeklaration zu umgehen:
json = json.replace(/%/g, '%%');
Aber ich finde heraus, dass Chrome% Escape in der Konsole nicht unterstützt. Seltsam ... Vielleicht funktioniert das in Zukunft.
Prost!
var jsonObj = {"streetLabel": "Avenue Anatole France", "city": "Paris 07", "postalCode": "75007", "countryCode": "FRA", "countryLabel": "France" };
document.getElementById("result-before").innerHTML = JSON.stringify(jsonObj);
Bei der Anzeige in HTML sollten Sie einen Balise hinzufügen <pre></pre>
document.getElementById("result-after").innerHTML = "<pre>"+JSON.stringify(jsonObj,undefined, 2) +"</pre>"
Beispiel:
<pre>
ist ein Muss, wenn Sie den JSON in a anzeigen <div>
. Nur für diesen Hinweis positiv bewertet!
Ich benutze die JSONView Chrome-Erweiterung (sie ist so hübsch wie es nur geht :):
Bearbeiten: hinzugefügt jsonreport.js
Ich habe auch einen eigenständigen Online-JSON-Pretty-Print-Viewer, jsonreport.js, veröffentlicht, der einen für Menschen lesbaren HTML5-Bericht bereitstellt, mit dem Sie alle JSON-Daten anzeigen können.
Weitere Informationen zum Format finden Sie im neuen JavaScript HTML5-Berichtsformat .
Sie können verwenden console.dir()
, was eine Verknüpfung für ist console.log(util.inspect())
. (Der einzige Unterschied besteht darin, dass alle inspect()
für ein Objekt definierten benutzerdefinierten Funktionen umgangen werden.)
Es verwendet Syntaxhervorhebung , intelligentes Einrücken , entfernt Anführungszeichen von Tasten und macht die Ausgabe so hübsch wie es nur geht.
const object = JSON.parse(jsonString)
console.dir(object, {depth: null, colors: true})
und für die Kommandozeile:
cat package.json | node -e "process.stdin.pipe(new stream.Writable({write: chunk => console.dir(JSON.parse(chunk), {depth: null, colors: true})}))"
Hier ist User123444555621s fantastisches HTML, das für Terminals angepasst ist. Praktisch zum Debuggen von Node-Skripten:
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";
}
);
}
Verwendungszweck:
// thing = any json OR string of json
prettyJ(thing);
Zum Debuggen benutze ich:
console.debug ("% o", Daten);
console.debug(data);
(zumindest) Chrome und Firefox. Es zeigt keine JSON-Darstellung von data
, geschweige denn eine hübsch gedruckte.
console.debug("%s: %o x %d", str, data, cnt);
kann für jemanden noch hilfreich sein.
console.dir
welche die Daten navigieren können.
Unzufrieden mit anderen hübschen Druckern für Ruby schrieb ich meinen eigenen ( NeatJSON ) und portierte ihn dann auf JavaScript, einschließlich eines kostenlosen Online-Formatierers . Der Code ist unter MIT-Lizenz kostenlos (recht zulässig).
Funktionen (alle optional):
Ich werde den Quellcode hier kopieren, damit dies nicht nur ein Link zu einer Bibliothek ist, sondern ich empfehle Ihnen, zur GitHub-Projektseite zu gehen , da dieser auf dem neuesten Stand gehalten wird und der folgende Code nicht.
(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);
Vielen Dank @all! Basierend auf den vorherigen Antworten ist hier eine andere Variantenmethode, die benutzerdefinierte Ersetzungsregeln als Parameter bereitstellt:
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 ' ';
}
}
],
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;
}
Es funktioniert gut:
console.table()
Lesen Sie hier mehr: https://developer.mozilla.org/pt-BR/docs/Web/API/Console/table
Douglas Crockfords JSON in der JavaScript-Bibliothek druckt JSON über die Stringify-Methode.
Möglicherweise finden Sie auch die Antworten auf diese ältere Frage hilfreich: Wie kann ich JSON in einem (Unix-) Shell-Skript hübsch drucken?
Ich bin heute auf ein Problem mit dem Code von @ Pumbaa80 gestoßen. Ich versuche, die JSON-Syntaxhervorhebung auf Daten anzuwenden, die ich in einer Mithril- Ansicht rendere. Daher muss ich DOM-Knoten für alles in der JSON.stringify
Ausgabe erstellen .
Ich habe den wirklich langen regulären Ausdruck auch in seine Bestandteile aufgeteilt.
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 im Kontext auf Github hier
Hier ist eine einfache JSON-Format- / Farbkomponente, die in React geschrieben wurde:
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>;
};
Sehen Sie, wie es in diesem CodePen funktioniert: https://codepen.io/benshope/pen/BxVpjo
Ich hoffe, das hilft!
Sie können JSON.stringify(your object, null, 2)
den zweiten Parameter als Ersetzungsfunktion verwenden, die Schlüssel und Val als Parameter verwendet. Dies kann verwendet werden, wenn Sie etwas in Ihrem JSON-Objekt ändern möchten.
Weitere Informationen: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify
Wenn Sie dies benötigen, um in einem Textbereich zu arbeiten, funktioniert die akzeptierte Lösung nicht.
<textarea id='textarea'></textarea>
$("#textarea").append(formatJSON(JSON.stringify(jsonobject),true));
function formatJSON(json,textarea) {
var nl;
if(textarea) {
nl = " ";
} else {
nl = "<br>";
}
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;
}
Wenn Sie nach einer schönen Bibliothek suchen, um json auf einer Webseite zu verschönern ...
Prism.js ist ziemlich gut.
Ich fand, dass die Verwendung von JSON.stringify (obj, undefined, 2) zum Abrufen der Einrückung und die Verwendung von Prisma zum Hinzufügen eines Themas ein guter Ansatz war.
Wenn Sie in JSON über einen Ajax-Aufruf laden, können Sie eine der Prism-Dienstprogrammmethoden zum Verschönern ausführen
Zum Beispiel:
Prism.highlightAll()
Das ist nett:
https://github.com/mafintosh/json-markup vonmafintosh
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>
Ein Beispiel für ein Stylesheet finden Sie hier
https://raw.githubusercontent.com/mafintosh/json-markup/master/style.css
Es konnte keine Lösung gefunden werden, die eine gute Syntaxhervorhebung für die Konsole aufweist. Hier ist meine 2p
npm install cli-highlight --save
const highlight = require('cli-highlight').highlight
console.logjson = (obj) => console.log(
highlight( JSON.stringify(obj, null, 4),
{ language: 'json', ignoreIllegals: true } ));
console.logjson({foo: "bar", someArray: ["string1", "string2"]});
Ich empfehle die Verwendung von HighlightJS . Es verwendet das gleiche Prinzip wie die akzeptierte Antwort, funktioniert jedoch auch für viele andere Sprachen und verfügt über viele vordefinierte Farbschemata . Wenn Sie RequireJS verwenden , können Sie ein kompatibles Modul mit generieren
python3 tools/build.py -tamd json xml <specify other language here>
Die Generierung basiert auf Python3 und Java. Hinzufügen -n
, um eine nicht minimierte Version zu generieren.
So können Sie ohne native Funktion drucken.
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
}
}
*/
Der einfachste Weg, ein Objekt für Debugging-Zwecke anzuzeigen:
console.log("data",data) // lets you unfold the object manually
Wenn Sie das Objekt im DOM anzeigen möchten, sollten Sie berücksichtigen, dass es Zeichenfolgen enthalten kann, die als HTML interpretiert werden. Deshalb müssen Sie etwas entkommen ...
var s = JSON.stringify(data,null,2) // format
var e = new Option(s).innerHTML // escape
document.body.insertAdjacentHTML('beforeend','<pre>'+e+'</pre>') // display
<!-- 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>
So heben Sie es hervor und verschönern es HTML
mit 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>";
}
);
}