Wie zeige ich den Inhalt eines JavaScript-Objekts in einem Zeichenfolgenformat an, wie wir es tun? alert eine Variable sind?

Auf die gleiche formatierte Weise möchte ich ein Objekt anzeigen.

Wenn Sie das Objekt zu Debugging-Zwecken drucken möchten, verwenden Sie den folgenden Code:

var obj = {prop1: 'prop1Value', prop2: 'prop2Value', child: {childProp1: 'childProp1Value'}}
console.log(obj)

wird angezeigt:

Hinweis: Sie dürfen nur das Objekt protokollieren. Dies funktioniert beispielsweise nicht:

console.log('My object : ' + obj)

Hinweis ' : Sie können in der logMethode auch ein Komma verwenden. Die erste Zeile der Ausgabe ist die Zeichenfolge, und danach wird das Objekt gerendert:

console.log('My object: ', obj);

Verwenden Sie die native JSON.stringifyMethode. Funktioniert mit verschachtelten Objekten und alle gängigen Browser unterstützen diese Methode.

str = JSON.stringify(obj);
str = JSON.stringify(obj, null, 4); // (Optional) beautiful indented output.
console.log(str); // Logs output to dev tools console.
alert(str); // Displays output using window.alert()

Link zur Mozilla API-Referenz und anderen Beispielen.

obj = JSON.parse(str); // Reverses above operation (Just in case if needed.)

Verwenden Sie einen benutzerdefinierten JSON.stringify-Ersatz, wenn dieser Javascript-Fehler auftritt

"Uncaught TypeError: Converting circular structure to JSON"

var output = '';
for (var property in object) {
  output += property + ': ' + object[property]+'; ';
}
alert(output);

console.dir(object)::

Zeigt eine interaktive Liste der Eigenschaften eines angegebenen JavaScript-Objekts an. In dieser Liste können Sie Offenlegungsdreiecke verwenden, um den Inhalt von untergeordneten Objekten zu untersuchen.

Beachten Sie, dass die console.dir()Funktion nicht dem Standard entspricht. Siehe MDN-Webdokumente

Versuche dies :

console.log(JSON.stringify(obj))

Dadurch wird die Stringify-Version des Objekts gedruckt. Anstelle [object]einer Ausgabe erhalten Sie also den Inhalt des Objekts.

Nun, Firefox (danke an @Bojangles für detaillierte Informationen) hat eine Object.toSource()Methode, die Objekte als JSON und drucktfunction(){} .

Das reicht für die meisten Debugging-Zwecke, denke ich.

Wenn Sie Alert verwenden möchten, um Ihr Objekt zu drucken, können Sie Folgendes tun:

alert("myObject is " + myObject.toSource());

Es sollte jede Eigenschaft und ihren entsprechenden Wert im Zeichenfolgenformat drucken.

Wenn Sie Daten in Tabellenform anzeigen möchten, können Sie diese verwenden

console.table(obj);

Tabelle kann sortiert werden, wenn Sie auf die Tabellenspalte klicken.

Sie können auch auswählen, welche Spalten angezeigt werden sollen:

console.table(obj, ['firstName', 'lastName']);

Weitere Informationen zu console.table finden Sie hier

In NodeJS können Sie ein Objekt mit drucken util.inspect(obj). Geben Sie unbedingt die Tiefe an, da sonst nur ein flacher Ausdruck des Objekts angezeigt wird.

Funktion:

var print = function(o){
    var str='';

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

    return str;
}

Verwendungszweck:

var myObject = {
    name: 'Wilson Page',
    contact: {
        email: '[email protected]',
        tel: '123456789'
    }  
}

$('body').append( print(myObject) );

Beispiel:

http://jsfiddle.net/WilsonPage/6eqMn/

Einfach benutzen

JSON.stringify(obj)

Beispiel

var args_string = JSON.stringify(obj);
console.log(args_string);

Oder

alert(args_string);

Beachten Sie auch, dass Funktionen in Javascript als Objekte betrachtet werden.

Als zusätzliche Anmerkung:

Tatsächlich können Sie eine neue Eigenschaft wie diese zuweisen und auf console.log zugreifen oder sie in einer Warnung anzeigen

foo.moo = "stackoverflow";
console.log(foo.moo);
alert(foo.moo);

Benutze das:

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

Wie gesagt, der beste und einfachste Weg, den ich gefunden habe, war

var getPrintObject=function(object)
{
    return JSON.stringify(object);
}

So drucken Sie das vollständige Objekt mit Node.js mit Farben als Bonus:

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

Die Farben sind natürlich optional. 'Tiefe: null' druckt das gesamte Objekt.

Die Optionen scheinen in Browsern nicht unterstützt zu werden.

Verweise:

https://developer.mozilla.org/en-US/docs/Web/API/Console/dir

https://nodejs.org/api/console.html#console_console_dir_obj_options

NB: In diesen Beispielen definiert yourObj das Objekt, das Sie untersuchen möchten.

Zunächst einmal meine am wenigsten bevorzugte und am häufigsten verwendete Art, ein Objekt anzuzeigen:

Dies ist die defakte Methode, um den Inhalt eines Objekts anzuzeigen

console.log(yourObj)

wird so etwas produzieren wie:

Ich denke, die beste Lösung besteht darin, durch die Objektschlüssel und dann durch die Objektwerte zu schauen, wenn Sie wirklich sehen möchten, was das Objekt enthält ...

console.log(Object.keys(yourObj));
console.log(Object.values(yourObj));

Es wird ungefähr Folgendes ausgegeben: (oben abgebildet: die im Objekt gespeicherten Schlüssel / Werte)

Es gibt auch diese neue Option, wenn Sie ECMAScript 2016 oder neuer verwenden:

Object.keys(yourObj).forEach(e => console.log(`key=${e}  value=${yourObj[e]}`));

Dies führt zu einer ordentlichen Ausgabe: Die in einer früheren Antwort erwähnte Lösung: console.log(yourObj)Zeigt zu viele Parameter an und ist nicht die benutzerfreundlichste Art, die gewünschten Daten anzuzeigen . Aus diesem Grund empfehle ich, Schlüssel und Werte dann separat zu protokollieren.

Next Up :

console.table(yourObj)

Jemand in einem früheren Kommentar schlug diesen vor, aber er hat bei mir nie funktioniert. Wenn es für jemand anderen in einem anderen Browser oder so funktioniert, dann ein dickes Lob! Ich werde den Code immer noch hier als Referenz einfügen! Gibt so etwas an die Konsole aus:

(Dies wurde meiner Bibliothek bei GitHub hinzugefügt. )

Das Rad hier neu erfinden! Keine dieser Lösungen hat für meine Situation funktioniert. Also habe ich schnell die Antwort von wilsonpage überarbeitet . Dieser dient nicht zum Drucken auf dem Bildschirm (über die Konsole, das Textfeld oder was auch immer). In solchen Situationen funktioniert es einwandfrei und funktioniert einwandfrei, wie vom OP angefordert, z alert. Viele Antworten hier beziehen sich nicht auf die Verwendung alertals OP angefordert. Auf jeden Fall ist es jedoch für den Datentransport formatiert. Diese Version scheint ein sehr ähnliches Ergebnis zu liefern wie toSource(). Ich habe nicht gegen getestet JSON.stringify, aber ich gehe davon aus, dass dies ungefähr das Gleiche ist. Diese Version ähnelt eher einer Polydatei, sodass Sie sie 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 war, aber es war nur kürzer, es zu schaffen, als eine Weile nach Antworten zu suchen. Und da diese Frage mein Top-Hit bei Google war, als ich anfing, danach zu suchen; Ich dachte, es hier zu platzieren könnte anderen helfen.

Das Ergebnis dieser Funktion ist jedoch eine Zeichenfolgendarstellung Ihres Objekts, selbst wenn Ihr Objekt eingebettete Objekte und Arrays enthält und selbst wenn diese Objekte oder Arrays noch weitere eingebettete Objekte und Arrays enthalten. (Ich habe gehört, dass du gerne trinkst? Also habe ich dein Auto mit einem Kühler gepimpt. Und dann habe ich deinen Kühler mit einem Kühler gepimpt. Also kann dein Kühler trinken, während du cool bist.)

Arrays werden mit []statt gespeichert {}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 Schlüsselnamen) in Anführungszeichen gesetzt. Dies ist nur erforderlich, wenn diese Zeichenfolgen Sonderzeichen enthalten (z. B. ein Leerzeichen oder einen Schrägstrich). Aber ich hatte keine Lust, dies zu entdecken, nur um einige Zitate zu entfernen, die sonst immer noch gut funktionieren würden.

Diese resultierende Zeichenfolge kann dann verwendet werden evaloder einfach in eine Var-Through-Zeichenfolgenmanipulation ausgegeben werden. 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)+"]";
}

Lassen Sie mich wissen, wenn ich alles durcheinander gebracht habe, funktioniert gut in meinen Tests. Die einzige Möglichkeit, einen Typ zu erkennen, arraybestand darin, das Vorhandensein von zu überprüfen length. Da Javascript Arrays wirklich als Objekte speichert, kann ich nicht nach Typ suchen array(es gibt keinen solchen Typ!). Wenn jemand einen besseren Weg kennt, würde ich ihn gerne hören. Wenn Ihr Objekt auch eine Eigenschaft mit dem Namen lengthhat, wird es von dieser Funktion fälschlicherweise als Array behandelt.

BEARBEITEN: Prüfung für Objekte mit Nullwert hinzugefügt. Danke Brock Adams

BEARBEITEN: Unten ist die feste Funktion, um unendlich rekursive Objekte drucken zu können. Dies wird nicht wie toSourcebei FF toSourcegedruckt, da die unendliche Rekursion einmal gedruckt wird, wobei diese Funktion sie sofort beendet. Diese Funktion läuft langsamer als die oben beschriebene, daher füge ich sie hier hinzu, anstatt die obige Funktion zu bearbeiten, da sie nur benötigt wird, wenn Sie Objekte übergeben möchten, die irgendwo wieder mit sich selbst verknüpft sind.

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)+"]";
}

Prüfung:

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.bodyist ein schreckliches Beispiel. Zum einen druckt FF bei Verwendung nur eine leere Objektzeichenfolge toSource. Und wenn Sie die obige Funktion verwenden, stürzt FF ab SecurityError: The operation is insecure.. Und Chrome wird weiter abstürzen Uncaught RangeError: Maximum call stack size exceeded. Es war klar, dass document.bodyes nicht in einen String konvertiert werden sollte. Weil es entweder zu groß ist oder gegen Sicherheitsrichtlinien verstößt, um auf bestimmte Eigenschaften zuzugreifen. Es sei denn, ich habe hier oben etwas durcheinander gebracht, erzähl es doch!

Wenn Sie das Objekt in voller Länge drucken möchten, können Sie verwenden

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

Wenn Sie das Objekt drucken möchten, indem Sie es in die Zeichenfolge konvertieren, dann

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

Hier ist eine Möglichkeit, dies zu tun:

console.log("%o", obj);

Ich brauchte eine Möglichkeit, das Objekt rekursiv zu drucken, was die Antwort von pagewil lieferte (Danke!). Ich habe es ein wenig aktualisiert, um eine Möglichkeit zum Drucken bis zu einer bestimmten Ebene einzuschließen und Abstände hinzuzufügen, damit es basierend auf der aktuellen Ebene, in der wir uns befinden, richtig eingerückt ist, damit es besser 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;
};

Verwendungszweck:

var pagewilsObject = {
    name: 'Wilson Page',
    contact: {
        email: '[email protected]',
        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) ); 

Ich benutze immer console.log("object will be: ", obj, obj1). Auf diese Weise muss ich die Problemumgehung mit stringify nicht mit JSON durchführen. Alle Eigenschaften des Objekts werden schön erweitert.

Eine andere Möglichkeit, Objekte in der Konsole anzuzeigen, ist mit JSON.stringify. Überprüfen Sie das folgende Beispiel:

var gandalf = {
  "real name": "Gandalf",
  "age (est)": 11000,
  "race": "Maia",
  "haveRetirementPlan": true,
  "aliases": [
    "Greyhame",
    "Stormcrow",
    "Mithrandir",
    "Gandalf the Grey",
    "Gandalf the White"
  ]
};
//to console log object, we cannot use console.log("Object gandalf: " + gandalf);
console.log("Object gandalf: ");
//this will show object gandalf ONLY in Google Chrome NOT in IE
console.log(gandalf);
//this will show object gandalf IN ALL BROWSERS!
console.log(JSON.stringify(gandalf));
//this will show object gandalf IN ALL BROWSERS! with beautiful indent
console.log(JSON.stringify(gandalf, null, 4));

Javascript-Funktion

<script type="text/javascript">
    function print_r(theObj){ 
       if(theObj.constructor == Array || theObj.constructor == Object){ 
          document.write("<ul>") 
          for(var p in theObj){ 
             if(theObj[p].constructor == Array || theObj[p].constructor == Object){ 
                document.write("<li>["+p+"] => "+typeof(theObj)+"</li>"); 
                document.write("<ul>") 
                print_r(theObj[p]); 
                document.write("</ul>") 
             } else { 
                document.write("<li>["+p+"] => "+theObj[p]+"</li>"); 
             } 
          } 
          document.write("</ul>") 
       } 
    } 
</script>

Objekt drucken

<script type="text/javascript">
print_r(JAVACRIPT_ARRAY_OR_OBJECT);
</script> 

über print_r in Javascript

var list = function(object) {
   for(var key in object) {
     console.log(key);
   }
}

Wo objectist dein Objekt?

oder Sie können dies in Chrome Dev Tools, Registerkarte "Konsole" verwenden:

console.log(object);

Objekt annehmen obj = {0:'John', 1:'Foo', 2:'Bar'}

Objektinhalt drucken

for (var i in obj){
    console.log(obj[i], i);
}

Konsolenausgabe (Chrome DevTools):

John 0
Foo 1
Bar 2

Ich hoffe, das hilft!

Ich bevorzuge die Verwendung console.table, um ein klares Objektformat zu erhalten. Stellen Sie sich also vor, Sie haben dieses Objekt:

const obj = {name: 'Alireza', family: 'Dezfoolian', gender: 'male', netWorth: "$0"};

Und Sie werden unten eine ordentliche und lesbare Tabelle wie diese sehen:

Eine kleine Hilfsfunktion, die ich in meinen Projekten immer zum einfachen, schnellen Debuggen über die Konsole verwende. Inspiration von Laravel.

/**
 * @param variable mixed  The var to log to the console
 * @param varName string  Optional, will appear as a label before the var
 */
function dd(variable, varName) {
    var varNameOutput;

    varName = varName || '';
    varNameOutput = varName ? varName + ':' : '';

    console.warn(varNameOutput, variable, ' (' + (typeof variable) + ')');
}

Verwendungszweck

dd(123.55); Ausgänge:

var obj = {field1: 'xyz', field2: 2016};
dd(obj, 'My Cool Obj'); 

Sie können auch das ES6-Vorlagenliteral-Konzept verwenden, um den Inhalt eines JavaScript-Objekts in einem Zeichenfolgenformat anzuzeigen.

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

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

Ich habe die Druckmethode von pagewil verwendet und es hat sehr gut funktioniert.

Hier ist meine leicht erweiterte Version mit (schlampigen) Einrückungen und unterschiedlichen Trennzeichen für Prop / Ob:

var print = function(obj, delp, delo, ind){
    delp = delp!=null ? delp : "\t"; // property delimeter
    delo = delo!=null ? delo : "\n"; // object delimeter
    ind = ind!=null ? ind : " "; // indent; ind+ind geometric addition not great for deep objects
    var str='';

    for(var prop in obj){
        if(typeof obj[prop] == 'string' || typeof obj[prop] == 'number'){
          var q = typeof obj[prop] == 'string' ? "" : ""; // make this "'" to quote strings
          str += ind + prop + ': ' + q + obj[prop] + q + '; ' + delp;
        }else{
          str += ind + prop + ': {'+ delp + print(obj[prop],delp,delo,ind+ind) + ind + '}' + delo;
        }
    }
    return str;
};

Eine weitere Modifikation des Pagewils-Codes ... er druckt nichts anderes als Strings aus und lässt die Zahlen- und Booleschen Felder leer, und ich habe den Tippfehler für den zweiten Typ von direkt innerhalb der von Megaboss erstellten Funktion behoben.

var print = function( o, maxLevel, level )
{
    if ( typeof level == "undefined" )
    {
        level = 0;
    }
    if ( typeof maxlevel == "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>';   // can also be <pre>
    }

    var levelStr = '<br>';
    for ( var x = 0; x < level; x++ )
    {
        levelStr += '    ';   // all those spaces only work with <pre>
    }

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

    for ( var p in o )
    {
        switch(typeof o[p])
        {
          case 'string':
          case 'number':    // .tostring() gets automatically applied
          case 'boolean':   // ditto
            str += levelStr + p + ': ' + o[p] + ' <br>';
            break;

          case 'object':    // this is where we become recursive
          default:
            str += levelStr + p + ': [ <br>' + print( o[p], maxLevel, level + 1 ) + levelStr + ']</br>';
            break;
        }
    }

    // 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>';   // also can be </pre>
    }
    return str;
};

Hier ist die Funktion.

function printObj(obj) {
console.log((function traverse(tab, obj) {
    let str = "";
    if(typeof obj !== 'object') {
        return obj + ',';
    }
    if(Array.isArray(obj)) {            
        return '[' + obj.map(o=>JSON.stringify(o)).join(',') + ']' + ',';
    }
    str = str + '{\n';
    for(var p in obj) {
        str = str + tab + ' ' + p + ' : ' + traverse(tab+' ', obj[p]) +'\n';
    }
    str = str.slice(0,-2) + str.slice(-1);                
    str = str + tab + '},';
    return str;
}('',obj).slice(0,-1)))};

Es kann Objekte mit lesbarem Tabulatoreinzug anzeigen.