JSON-analysiertes Objekt drucken?


200

Ich habe ein Javascript-Objekt, das mit JSON analysiert wurde. JSON.parseIch möchte das Objekt jetzt drucken, damit ich es debuggen kann (mit der Funktion läuft etwas schief). Wenn ich folgendes mache ...

for (property in obj) {
    output += property + ': ' + obj[property]+'; ';
}
console.log(output);

Ich bekomme mehrere [Objekt Objekt] aufgelistet. Ich frage mich, wie ich das ausdrucken soll, um den Inhalt anzuzeigen.


5
Als Nebenbemerkung listet for (Eigenschaft in obj) alle Eigenschaften auf, auch die geerbten. Sie erhalten also eine Menge irrelevanter Kommentare für Object.prototype und jede 'Mutterklasse'. Dies ist bei JSON-Objekten unpraktisch. Sie müssen sie mit hasOwnProperty () filtern, um nur die Eigenschaften zu erhalten, die dieses Objekt besitzt.
BiAiB

Antworten:


124

Die meisten Debugger-Konsolen unterstützen die direkte Anzeige von Objekten. Benutz einfach

console.log(obj);

Abhängig von Ihrem Debugger wird das Objekt in der Konsole höchstwahrscheinlich als reduzierter Baum angezeigt. Sie können den Baum öffnen und das Objekt untersuchen.


122
Es ist erwähnenswert, dass in Chrome (und möglicherweise in anderen Browsern) in Kombination mit einer Zeichenfolge wie dieser console.log("object: " + obj)das Objekt nicht angezeigt wird, sondern "object: [Object obj]" ausgegeben wird.
Shahar

24
Mit @Shahar console.log("object: %O", obj)(Chrome) oder console.log("object: %o", obj)(Firefox | Safari) erhalten Sie Zugriff auf die Objektdetails (siehe meine Antwort unten).
Dave Anderson

1
@ DaveAnderson gute Aufnahme für die Objektformatierung in der Konsole.
Lekant

@ Shahar danke, deine war die Information, die ich brauchte. Sollte der Antwort hinzugefügt werden.
Leo Flaherty

3
Zusätzlich zur Methode von @DaveAnderson kann die Verwendung eines Kommas zum Trennen von Zeichenfolgen von Objekten auch funktionieren:console.log("My object: ", obj)
Shahar

571

Sie wissen, wofür JSON steht? JavaScript-Objektnotation . Es ist ein ziemlich gutes Format für Objekte.

JSON.stringify(obj) gibt Ihnen eine Zeichenfolgendarstellung des Objekts zurück.


12
Ich bin überrascht, dass diese Antwort ganz unten ist ...... Dies sollte die akzeptierte Antwort sein :-)
Mingyu

1
Was ist, wenn Sie keine Zeichenfolgendarstellung möchten, sondern das Objekt, wie es in einem Code-Editor angezeigt wird?
SuperUberDuper

5
@SuperUberDuper: ... Dann würden Sie jetzt nicht versuchen, eine Zeichenfolgendarstellung zu erstellen, oder? :)
CHao

Ich glaube, SuperUberDuper hat gefragt, ob das Objekt protokolliert oder angezeigt werden kann, ohne es in eine Zeichenfolge zu konvertieren. Wenn das DOM im Browser ein Element benötigt, können Sie json so stringifizieren und einen Elementinhalt innerHTML auf diese Zeichenfolge setzen, um es auf der Seite anzuzeigen.
Jasonleonhard

Zum Beispiel: Json aus './data.json' importieren; var el = document.createElement ('div'); el.innerHTML = JSON.stringify (Json);
Jasonleonhard

54

versuche console.dir()stattconsole.log()

console.dir(obj);

MDN sagt, console.dir()wird unterstützt von:

  • FF8 +
  • IE9 +
  • Oper
  • Chrom
  • Safari

1
Nur verfügbar in IE9 +
Jasonscript

3
console.dir()ist auch in FF8 +, Opera, Chrome und Safari verfügbar: developer.mozilla.org/en-US/docs/Web/API/console.dir
olibre

Toll! Dies ist die beste Lösung für mich. Vielen Dank.
Hoang Le

1
was ist mit Knoten js?
Xsmael

gut, unterstützt aber keine String-Verkettung wie log ("string" + variable)
Nassim

47

Wenn Sie einen hübschen, mehrzeiligen JSON mit Einrückung möchten, können Sie ihn JSON.stringifymit seinem dritten Argument verwenden:

JSON.stringify(value[, replacer[, space]])

Beispielsweise:

var obj = {a:1,b:2,c:{d:3, e:4}};

JSON.stringify(obj, null, "    ");

oder

JSON.stringify(obj, null, 4);

gibt Ihnen folgendes Ergebnis:

"{
    "a": 1,
    "b": 2,
    "c": {
        "d": 3,
        "e": 4
    }
}"

In einem Browser console.log(obj)macht es noch bessere Arbeit, in einer Shell-Konsole (node.js) jedoch nicht.


40



console.log( JSON.stringify(data, null, " ") );

Um ein JSON-analysiertes Objekt zu drucken, geben Sie einfach ein und Sie erhalten eine sehr klare Ausgabe


25

Verwenden Sie Zeichenfolgenformate.

console.log("%s %O", "My Object", obj);

Chrome hat Formatbezeichner mit der folgenden;

  • %s Formatiert den Wert als Zeichenfolge.
  • %doder %iFormatiert den Wert als Ganzzahl.
  • %f Formatiert den Wert als Gleitkommawert.
  • %o Formatiert den Wert als erweiterbares DOM-Element (wie im Bedienfeld Elemente).
  • %O Formatiert den Wert als erweiterbares JavaScript-Objekt.
  • %c Formatiert die Ausgabezeichenfolge gemäß den von Ihnen bereitgestellten CSS-Stilen.

Firefox hat auch String-Substitutionen mit ähnlichen Optionen.

  • %oGibt einen Hyperlink zu einem JavaScript-Objekt aus. Durch Klicken auf den Link wird ein Inspektor geöffnet.
  • %doder %iGibt eine Ganzzahl aus. Die Formatierung wird noch nicht unterstützt.
  • %s Gibt eine Zeichenfolge aus.
  • %fGibt einen Gleitkommawert aus. Die Formatierung wird noch nicht unterstützt.

Safari verfügt über Druckformatierer

  • %doder %iGanzzahl
  • %[0.N]f Gleitkommawert mit N Stellen Genauigkeit
  • %o Objekt
  • %s String

1
nette Referenzantwort
David

1
% O ist wirklich hilfreich
Everton

4

Schön und einfach:

console.log("object: %O", obj)

1
Könnten Sie bitte beschreiben, wofür% O ist? sollte es speziell O sein? - Ihre Lösung funktioniert wie ein Zauber
Anthonius

O steht für Objekt. Solange das Objekt als Zeichenfolge gedruckt werden kann, sollte es ohne Probleme gedruckt werden. Dies hat mir in vielen Fällen geholfen, Fehler zu
beheben,

Ich habe vergessen, hier zu informieren, eigentlich müssen wir% O nicht verwenden. Wir können console.log ("object:", obj) direkt verwenden. Danke @mbenhalima
Anthonius vor

3

Benutz einfach

console.info("CONSOLE LOG : ")
console.log(response);
console.info("CONSOLE DIR : ")
console.dir(response);

und Sie erhalten dies in Chrome-Konsole:

CONSOLE LOG : 
facebookSDK_JS.html:56 Object {name: "Diego Matos", id: "10155988777540434"}
facebookSDK_JS.html:57 CONSOLE DIR : 
facebookSDK_JS.html:58 Objectid: "10155988777540434"name: "Diego Matos"__proto__: Object

2

Einfache Funktion zum Warnen des Inhalts eines Objekts oder eines Arrays.
Rufen Sie diese Funktion mit einem Array oder einer Zeichenfolge oder einem Objekt auf, das den Inhalt alarmiert.

Funktion

function print_r(printthis, returnoutput) {
    var output = '';

    if($.isArray(printthis) || typeof(printthis) == 'object') {
        for(var i in printthis) {
            output += i + ' : ' + print_r(printthis[i], true) + '\n';
        }
    }else {
        output += printthis;
    }
    if(returnoutput && returnoutput == true) {
        return output;
    }else {
        alert(output);
    }
}

Verwendung

var data = [1, 2, 3, 4];
print_r(data);

2

Der folgende Code zeigt die vollständigen JSON-Daten im Warnfeld an

var data= '{"employees":[' +
'{"firstName":"John","lastName":"Doe" },' +
'{"firstName":"Anna","lastName":"Smith" },' +
'{"firstName":"Peter","lastName":"Jones" }]}';

json = JSON.parse(data);
window.alert(JSON.stringify(json));

2

Wenn Sie debuggen möchten, verwenden Sie das Konsolen-Debug

window.console.debug(jsonObject);

0

Wenn Sie in js auf einem Server arbeiten, reicht ein bisschen mehr Gymnastik aus ... Hier ist mein Ppos (Pretty-Print-on-Server):

ppos = (object, space = 2) => JSON.stringify(object, null, space).split('\n').forEach(s => console.log(s));

Das macht einen knallharten Job, etwas zu erstellen, das ich tatsächlich lesen kann, wenn ich Servercode schreibe.


0

Ich weiß nicht, wie es nie offiziell erstellt wurde, aber ich habe meine eigene jsonMethode zum consoleObjekt hinzugefügt , um das Drucken von String-Protokollen zu vereinfachen:

Das Beobachten von Objekten (Nicht-Primitiven) in Javascript ist ein bisschen wie die Quantenmechanik. Was Sie "messen", ist möglicherweise nicht der reale Zustand, der sich bereits geändert hat.

console.json = console.json || function(argument){
    for(var arg=0; arg < arguments.length; ++arg)
        console.log(  JSON.stringify(arguments[arg], null, 4)  )
}

// use example
console.json(   [1,'a', null, {a:1}], {a:[1,2]}    )

Oft ist es erforderlich, eine stringifizierte Version eines Objekts anzuzeigen, da beim Drucken im Ist-Zustand (Rohobjekt) eine "Live" -Version des Objekts gedruckt wird, die im Verlauf des Programms mutiert wird und den Status des Objekts nicht widerspiegelt Zum protokollierten Zeitpunkt zum Beispiel:

var foo = {a:1, b:[1,2,3]}

// lets peek under the hood
console.log(foo) 

// program keeps doing things which affect the observed object
foo.a = 2
foo.b = null
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.