Frage Wie kann ich JSON mit JavaScript hübsch drucken?


Wie kann ich JSON in einem leicht lesbaren (für menschliche Leser) Format anzeigen? Ich suche hauptsächlich nach Einrückungen und Leerzeichen, vielleicht sogar nach Farben / Schriftstilen / etc.


1660
2018-01-26 22:33


Ursprung


Antworten:


Pretty-Printing ist nativ implementiert JSON.stringify(). Das dritte Argument ermöglicht ein hübsches Drucken und legt den Abstand fest:

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

Wenn Sie eine Syntax-Hervorhebung benötigen, könnten Sie einige Regex-Zauber wie folgt verwenden:

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

Sehen Sie in Aktion hier: jsfiddle

Oder ein vollständiges Snippet, das unten zur Verfügung gestellt wird:

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


3692
2017-08-28 10:56



Die Antwort von User Pumbaa80 ist großartig, wenn Sie eine haben Objekt Du willst schön gedruckt werden. Wenn Sie mit einem gültigen JSON beginnen Zeichenfolge Damit du schön gedruckt wirst, musst du es zuerst in ein Objekt umwandeln:

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

Dadurch wird ein JSON-Objekt aus der Zeichenfolge erstellt und dann mithilfe von JSON stringify in den hübschen Ausdruck zurück in eine Zeichenfolge konvertiert.


180
2018-06-21 20:35



Basierend auf der Antwort von Pumbaa80 habe ich den Code so geändert, dass er die Farben von console.log verwendet (sicherlich funktioniert das bei Chrome) und nicht HTML. Die Ausgabe kann in der Konsole angezeigt werden. Sie können die _variables innerhalb der Funktion bearbeiten, indem Sie etwas mehr Styling 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 Bookmarklet, 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);

Verwendung:

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

Edit: Ich habe gerade versucht, das Symbol% ​​mit dieser Zeile nach der Variablendeklaration zu umgehen:

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

Aber ich finde heraus, dass Chrome nicht unterstützt% in der Konsole zu entkommen. Seltsam ... Vielleicht wird das in Zukunft funktionieren.

Prost!

enter image description here


23
2018-01-29 13:16



Ich verwende das JSONView Chrome Erweiterung (Es ist so schön wie es geht :):

Bearbeiten: hinzugefügt jsonreport.js

Ich habe auch einen eigenständigen JSON Pretty-Printer-Viewer, jsonreport.js, veröffentlicht, der einen menschlich lesbaren HTML5-Bericht enthält, mit dem Sie JSON-Daten anzeigen können.

Sie können mehr über das Format in lesen Neues JavaScript HTML5-Berichtsformat.


20
2018-01-26 22:37



Sie können verwenden console.dir(), das ist eine Abkürzung für console.log(util.inspect()). (Der einzige Unterschied ist, dass es jeden Brauch umgeht inspect() Funktion für ein Objekt definiert.)

Es benutzt Satzstellung markieren, intelligente Einrückung, Entfernt Zitate aus Schlüsseln und macht die Ausgabe so schön wie es nur geht.

const object = JSON.parse(jsonString)

console.dir(object, {depth: null, colors: true})

und für die Befehlszeile:

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


16
2017-11-14 09:46



Besserer Weg.

Prettify JSON Array in Javascript

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

11
2017-10-21 10:19



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 eine Balise hinzufügen <pre></pre>

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

Beispiel:

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>


7
2018-03-01 15:42



Zum Debuggen verwende ich:

console.debug ("% o", Daten);

5
2018-01-10 14:11



Unzufrieden mit anderen hübschen Druckern für Ruby schrieb ich meine eigenen (NeatJSON) und dann hat es in JavaScript portiert einschließlich ein kostenloser Online-Formatierer. Der Code ist frei unter MIT-Lizenz (ziemlich freizügig).

Funktionen (alle optional):

  • Legen Sie eine Linienbreite und einen Zeilenumbruch so fest, dass Objekte und Arrays auf der gleichen Linie bleiben, wenn sie passen. Wenn sie dies nicht tun, wird ein Wert pro Zeile umbrochen.
  • Sortieren Sie Objektschlüssel, wenn Sie möchten.
  • Richten Sie die Objektschlüssel aus (richten Sie die Doppelpunkte aus).
  • Formatieren Sie Gleitkommazahlen auf eine bestimmte Anzahl von Dezimalstellen, ohne die Ganzzahlen zu verfälschen.
  • Der 'Kurze' Umbruchmodus legt öffnende und schließende Klammern / Klammern in die selbe Zeile wie Werte, wodurch ein Format entsteht, das manche bevorzugen.
  • Granulare Kontrolle über den Abstand für Arrays und Objekte, in Klammern, vor / nach Doppelpunkten und Kommas.
  • Die Funktion wird sowohl den Webbrowsern als auch Node.js zur Verfügung gestellt.

Ich werde den Quellcode hier kopieren, so dass dies nicht nur ein Link zu einer Bibliothek ist, aber ich ermutige Sie, auf die GitHub Projektseite, da dies auf dem neuesten Stand gehalten wird und der Code unten 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);

4
2018-04-19 21:49