JSON mit JavaScript hübsch ausdrucken

Question

Wie kann ich JSON in einem leicht zu lesenden Format (für menschliche Leser) anzeigen? Ich bin in erster Linie für Einrückung und Leerraum, mit vielleicht sogar Farben / Schriftarten / etc.

Answer 1

Auf der Grundlage der Antwort von Pumbaa80 habe ich den Code so geändert, dass die Farben von console.log verwendet werden (was in Chrome sicher funktioniert) und nicht HTML. Die Ausgabe ist in der Konsole zu sehen. Sie können die _Variablen innerhalb der Funktion bearbeiten und 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 habe herausgefunden, dass Chrome kein %-Escaping in der Konsole unterstützt. Seltsam... Vielleicht wird dies in Zukunft funktionieren.

Zum Wohl!

Answer 2

Sie können verwenden console.dir() was eine Abkürzung ist für console.log(util.inspect()) . (Der einzige Unterschied besteht darin, dass alle benutzerdefinierten Optionen umgangen werden. inspect() Funktion, die für ein Objekt definiert ist).

Sie verwendet Syntax-Hervorhebung , intelligente Einrückung , Entfernt Anführungszeichen aus Schlüsseln und macht die Ausgabe so hübsch, wie sie nur sein kann.

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

Answer 3

Ich benutze die JSONView Chrome-Erweiterung (schöner geht's nicht :):

Bearbeiten: hinzugefügt jsonreport.js

Ich habe auch einen eigenständigen JSON pretty print viewer online gestellt, jsonreport.js, der einen für Menschen lesbaren HTML5-Bericht liefert, mit dem Sie beliebige JSON-Daten anzeigen können.

Weitere Informationen über das Format finden Sie unter Neues JavaScript-HTML5-Berichtsformat .

Answer 4

Wenn Sie ES5 verwenden, rufen Sie einfach JSON.stringify mit auf:

• 2. Argument: Ersetzer; wird auf Null gesetzt,

• 3. Argument: Leerzeichen; Tabulator verwenden.

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

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

Answer 5

Hier ist user123444555621's awesome HTML ein für Terminals angepasst. Praktisch für die Fehlersuche in 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";
    }
  );
}

Verwendung:

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