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

Pretty-Printing ist nativ implementiert in JSON.stringify() . Das dritte Argument aktiviert den Schöndruck und legt die zu verwendenden Abstände fest:

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

Wenn Sie eine Syntaxhervorhebung benötigen, können Sie eine Regex-Magie wie diese 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 hier in Aktion: jsfiddle

Oder einen vollständigen Ausschnitt unten:

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

Answer 2

Die Antwort von Benutzer Pumbaa80 ist gut, wenn Sie eine Objekt die Sie hübsch gedruckt haben wollen. Wenn Sie von einem gültigen JSON String die Sie hübsch gedruckt haben möchten, müssen Sie sie zunächst in ein Objekt umwandeln:

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

Dabei wird aus der Zeichenkette ein JSON-Objekt erstellt, das dann mit Hilfe von JSON stringify's pretty print wieder in eine Zeichenkette umgewandelt wird.

Answer 3

Ein besserer Weg.

JSON-Array in Javascript aufhübschen

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

Answer 4

Ich glaube, Sie suchen so etwas wie das hier:

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

Damit wird Ihre JSON-Zeichenkette "hübsch" ausgedruckt, wobei ein Tabulator für die Einrückung verwendet wird.

Wenn Sie es vorziehen, Leerzeichen anstelle von Tabulatoren zu verwenden, können Sie auch eine Zahl für die Anzahl der gewünschten Leerzeichen verwenden:

JSON.stringify(obj, null, 2);

Answer 5

var jsonObj = {"streetLabel": "Avenue Anatole France", "city": "Paris 07",  "postalCode": "75007", "countryCode": "FRA",  "countryLabel": "France" };

document.getElementById("result-before").innerHTML = JSON.stringify(jsonObj);

Im Falle der Anzeige in HTML, sollten Sie eine Balise hinzufügen <pre></pre>

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

Ejemplo:

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>