Wie kann ich ein JavaScript-Objekt anzeigen?

Question

Wie zeige ich den Inhalt eines JavaScript-Objekts in einem String-Format an, wie wir es bei alert eine Variable?

Ich möchte ein Objekt auf die gleiche Weise formatieren.

Answer 1

Verwenden Sie dies:

console.log('print object: ' + JSON.stringify(session));

Answer 2

(Dies wurde meiner Bibliothek hinzugefügt unter GitHub )

Hier wird das Rad neu erfunden! Keine dieser Lösungen hat in meiner Situation funktioniert. Also habe ich schnell nachgebessert wilsonpage Antwort. Dies ist nicht für die Ausgabe auf dem Bildschirm (über die Konsole, oder Textfeld oder was auch immer). Es funktioniert gut in diesen Situationen und funktioniert genau so gut wie der OP angefordert, für alert . Viele Antworten hier gehen nicht auf die Verwendung alert wie vom OP gewünscht. Sie ist jedoch für den Datentransport formatiert. Diese Version scheint ein sehr ähnliches Ergebnis zu liefern wie toSource() . Ich habe nicht getestet gegen JSON.stringify aber ich gehe davon aus, dass es sich um dieselbe Sache handelt. Diese Version ist mehr wie ein Poly-Fil, so dass Sie es in jeder Umgebung verwenden können. Das Ergebnis dieser Funktion ist eine gültige Javascript-Objektdeklaration.

Ich würde nicht bezweifeln, dass so etwas schon irgendwo auf SO zu finden war, aber es war einfach kürzer, es zu machen, als eine Weile nach den bisherigen Antworten zu suchen. Und da diese Frage mein Top-Treffer bei Google war, als ich anfing, danach zu suchen, dachte ich mir, dass es anderen helfen könnte, sie hier zu stellen.

Wie auch immer, das Ergebnis dieser Funktion ist eine Zeichenkettendarstellung Ihres Objekts, selbst wenn Ihr Objekt eingebettete Objekte und Arrays hat, und selbst wenn diese Objekte oder Arrays noch weitere eingebettete Objekte und Arrays haben. (Ich habe gehört, du trinkst gerne? Also habe ich dein Auto mit einer Kühlbox aufgemotzt. Und dann habe ich deine Kühlbox mit einer Kühlbox aufgemotzt. So kann deine Kühlbox trinken, während du cool bist.)

Arrays werden gespeichert mit [] anstelle von {} und haben daher keine Schlüssel/Wert-Paare, sondern nur Werte. Wie normale Arrays. Daher werden sie wie Arrays erstellt.

Außerdem werden alle Zeichenfolgen (einschließlich der Schlüsselnamen) in Anführungszeichen gesetzt, was nicht notwendig ist, es sei denn, diese Zeichenfolgen enthalten Sonderzeichen (wie Leerzeichen oder Schrägstriche). Aber ich hatte keine Lust, dies zu erkennen, nur um einige Anführungszeichen zu entfernen, die sonst noch gut funktionieren würde.

Diese resultierende Zeichenkette kann dann mit eval oder einfach durch Stringmanipulation in eine Variable zu übertragen. So erstellen Sie Ihr Objekt erneut, aus Text.

function ObjToSource(o){
    if (!o) return 'null';
    var k="",na=typeof(o.length)=="undefined"?1:0,str="";
    for(var p in o){
        if (na) k = "'"+p+ "':";
        if (typeof o[p] == "string") str += k + "'" + o[p]+"',";
        else if (typeof o[p] == "object") str += k + ObjToSource(o[p])+",";
        else str += k + o[p] + ",";
    }
    if (na) return "{"+str.slice(0,-1)+"}";
    else return "["+str.slice(0,-1)+"]";
}

Sagen Sie mir Bescheid, wenn ich es vermasselt habe, bei meinen Tests funktioniert es gut. Außerdem ist der einzige Weg, den ich mir vorstellen kann, um den Typ zu erkennen array war die Überprüfung auf das Vorhandensein von length . Da Javascript wirklich speichert Arrays als Objekte, kann ich nicht tatsächlich für Typ überprüfen array (einen solchen Typ gibt es nicht!). Wenn jemand einen besseren Weg kennt, würde ich mich freuen, ihn zu hören. Denn, wenn Ihr Objekt auch eine Eigenschaft namens length dann wird diese Funktion sie fälschlicherweise als Array behandeln.

EDIT: Prüfung auf nullwertige Objekte hinzugefügt. Danke Brock Adams

EDIT: Unten ist die feste Funktion, um unendlich rekursive Objekte drucken zu können. Diese Funktion druckt nicht das Gleiche wie toSource aus FF, weil toSource wird die unendliche Rekursion einmalig ausgeben, während diese Funktion sie sofort beendet. Diese Funktion läuft langsamer als die obige, also füge ich sie hier ein, anstatt die obige Funktion zu bearbeiten, da sie nur benötigt wird, wenn Sie planen, Objekte zu übergeben, die irgendwo auf sich selbst zurückverweisen.

const ObjToSource=(o)=> {
    if (!o) return null;
    let str="",na=0,k,p;
    if (typeof(o) == "object") {
        if (!ObjToSource.check) ObjToSource.check = new Array();
        for (k=ObjToSource.check.length;na<k;na++) if (ObjToSource.check[na]==o) return '{}';
        ObjToSource.check.push(o);
    }
    k="",na=typeof(o.length)=="undefined"?1:0;
    for(p in o){
        if (na) k = "'"+p+"':";
        if (typeof o[p] == "string") str += k+"'"+o[p]+"',";
        else if (typeof o[p] == "object") str += k+ObjToSource(o[p])+",";
        else str += k+o[p]+",";
    }
    if (typeof(o) == "object") ObjToSource.check.pop();
    if (na) return "{"+str.slice(0,-1)+"}";
    else return "["+str.slice(0,-1)+"]";
}

Test:

var test1 = new Object();
test1.foo = 1;
test1.bar = 2;

var testobject = new Object();
testobject.run = 1;
testobject.fast = null;
testobject.loop = testobject;
testobject.dup = test1;

console.log(ObjToSource(testobject));
console.log(testobject.toSource());

Ergebnis:

{'run':1,'fast':null,'loop':{},'dup':{'foo':1,'bar':2}}
({run:1, fast:null, loop:{run:1, fast:null, loop:{}, dup:{foo:1, bar:2}}, dup:{foo:1, bar:2}})

HINWEIS: Der Versuch zu drucken document.body ist ein schreckliches Beispiel. Zum einen gibt FF einfach eine leere Objektzeichenkette aus, wenn man toSource . Wenn Sie die obige Funktion verwenden, stürzt FF bei SecurityError: The operation is insecure. . Und Chrome stürzt ab bei Uncaught RangeError: Maximum call stack size exceeded . Offensichtlich, document.body sollte nicht in eine Zeichenkette umgewandelt werden. Weil es entweder zu groß ist oder gegen die Sicherheitsrichtlinien verstößt, auf bestimmte Eigenschaften zuzugreifen. Es sei denn, ich etwas durcheinander hier, sagen Sie!

Answer 3

Wenn Sie das Objekt in seiner vollen Länge drucken möchten, können Sie

console.log(require('util').inspect(obj, {showHidden: false, depth: null})

Wenn Sie das Objekt ausdrucken wollen, indem Sie es in eine Zeichenkette umwandeln, dann

console.log(JSON.stringify(obj));

Answer 4

Ich brauchte eine Möglichkeit, das Objekt rekursiv zu drucken, die pagewils Antwort lieferte (Danke!). Ich habe es ein wenig aktualisiert, um einen Weg, um bis zu einer bestimmten Ebene zu drucken, und um Abstand hinzufügen, so dass es richtig eingerückt ist, basierend auf der aktuellen Ebene, die wir in sind, so dass es mehr lesbar ist.

// Recursive print of object
var print = function( o, maxLevel, level ) {
    if ( typeof level == "undefined" ) {
        level = 0;
    }
    if ( typeof level == "undefined" ) {
        maxLevel = 0;
    }

    var str = '';
    // Remove this if you don't want the pre tag, but make sure to remove
    // the close pre tag on the bottom as well
    if ( level == 0 ) {
        str = '<pre>';
    }

    var levelStr = '';
    for ( var x = 0; x < level; x++ ) {
        levelStr += '    ';
    }

    if ( maxLevel != 0 && level >= maxLevel ) {
        str += levelStr + '...</br>';
        return str;
    }

    for ( var p in o ) {
        if ( typeof o[p] == 'string' ) {
            str += levelStr +
                p + ': ' + o[p] + ' </br>';
        } else {
            str += levelStr +
                p + ': { </br>' + print( o[p], maxLevel, level + 1 ) + levelStr + '}</br>';
        }
    }

    // Remove this if you don't want the pre tag, but make sure to remove
    // the open pre tag on the top as well
    if ( level == 0 ) {
        str += '</pre>';
    }
    return str;
};

Verwendung:

var pagewilsObject = {
    name: 'Wilson Page',
    contact: {
        email: 'wilson@hotmail.com',
        tel: '123456789'
    }  
}

// Recursive of whole object
$('body').append( print(pagewilsObject) ); 

// Recursive of myObject up to 1 level, will only show name 
// and that there is a contact object
$('body').append( print(pagewilsObject, 1) );

Answer 5

Sie können auch das ES6-Template-Literal-Konzept verwenden, um den Inhalt eines JavaScript-Objekts in einem String-Format anzuzeigen.

alert(`${JSON.stringify(obj)}`);

const obj  = {
  "name" : "John Doe",
  "habbits": "Nothing",
};
alert(`${JSON.stringify(obj)}`);