it-swarm.com.de

Wie kann ich ein JavaScript-Objekt anzeigen?

Wie zeige ich den Inhalt eines JavaScript-Objekts in einem String-Format an, beispielsweise wenn wir eine Variable alert verwenden?

Auf dieselbe Weise möchte ich ein Objekt anzeigen.

1359
maxjackie

Mit Firefox

Wenn Sie das Objekt zu Debugging-Zwecken drucken möchten, schlage ich vor, Firebug for Firefox zu installieren und den Code zu verwenden:

console.log(obj)

Mit Chrome

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

wird angezeigt 

 screenshot console chrome

Hinweis: Sie müssen nur das Objekt protokollieren. Zum Beispiel funktioniert das nicht:

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

Verwenden Sie die native JSON.stringify-Methode . Funktioniert mit verschachtelten Objekten und allen gängigen Browsern support dieser 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 zu Mozilla API-Referenz und anderen Beispielen.

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

Verwenden Sie einen benutzerdefinierten JSON.stringify-Ersetzer , wenn Dieser Javascript-Fehler auftritt

"Uncaught TypeError: Converting circular structure to JSON"
1808
Sandeep
var output = '';
for (var property in object) {
  output += property + ': ' + object[property]+'; ';
}
alert(output);
373
Flavius Stef

console.dir(object):

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

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

114

versuche dies :

console.log(JSON.stringify(obj))

Dadurch wird die Stringify-Version des Objekts gedruckt. Statt [object] als Ausgabe erhalten Sie den Inhalt des Objekts.

67
Abhishek Goel

Nun, Firefox (dank @Bojangles für detaillierte Informationen) hat die Object.toSource() - Methode, die Objekte als JSON und function(){} druckt.

Das reicht für die meisten Debugging-Zwecke.

64
alamar

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

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

Es sollte jede Eigenschaft und den entsprechenden Wert im Zeichenfolgenformat ausgeben.

51
Garry

In NodeJS können Sie ein Objekt drucken, indem Sie util.inspect(obj) verwenden. Stellen Sie sicher, dass Sie die Tiefe angeben, da das Objekt nur flach gedruckt wird. 

32
Lander

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/

31
wilsonpage

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

console.table(obj);

Die 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 hier

30
Vlad Bezden

Wie gesagt, der beste und einfachste Weg, den ich fand, war 

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

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. Mit 'Tiefe: Null' wird das gesamte Objekt gedruckt.

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

17
jpoppe

Benutze das:

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

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

console.log (required ('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));

15
sreepurna

Ich brauchte einen Weg, um das Objekt rekursiv zu drucken, was die Antwort von pagewil lieferte (Danke!). Ich habe es ein wenig überarbeitet, um eine Möglichkeit zum Drucken bis zu einem bestimmten Level hinzuzufügen, und um Abstände hinzuzufügen, so dass es richtig eingerückt wird, basierend auf dem aktuellen Level, in dem wir uns befinden, sodass 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) ); 
11
megaboss98

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

Das Rad hier neu erfinden! Keine dieser Lösungen funktionierte für meine Situation. Also habe ich schnell pagewils Antwort geübt. Dieses ist nicht zum Drucken auf dem Bildschirm (über Konsole, Textfeld oder was auch immer). Es ist jedoch für den Datentransport vorgesehen. Diese Version scheint ein sehr ähnliches Ergebnis zu liefern wie toSource(). Ich habe JSON.stringify nicht ausprobiert, aber ich gehe davon aus, dass es sich um dasselbe handelt. Das Ergebnis dieser Funktion ist eine gültige Javascript-Objektdeklaration.

Ich würde nicht bezweifeln, dass sich so etwas schon irgendwo auf SO befand, aber es war nur kürzer, um es zu schaffen, als eine Weile nach vergangenen Antworten zu suchen. Und da diese Frage mein bester Erfolg bei Google war, begann ich darüber zu suchen. Ich dachte, es 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 dann, wenn diese Objekte oder Arrays noch weitere eingebettete Objekte und Arrays enthalten. (Ich habe gehört, dass Sie gerne trinken? Also habe ich Ihr Auto mit einem Kühler gepimpt. Und dann, ich habe Ihren Kühler mit einem Kühler gepimpt. So kann Ihr Kühler trinken, während Sie cool sind.)

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

Alle Zeichenfolgen (einschließlich Schlüsselnamen) werden ebenfalls in Anführungszeichen gesetzt. Dies ist nicht erforderlich, es sei denn, diese Zeichenfolgen enthalten Sonderzeichen (wie Leerzeichen oder Schrägstriche). Aber ich hatte keine Lust, dies zu entdecken, nur um einige Anführungszeichen zu entfernen, die sonst noch gut funktionieren würden.

Diese resultierende Zeichenfolge kann dann mit eval verwendet oder einfach in eine Vari-String-Manipulation gespeichert 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)+"]";
}

Lass mich wissen, wenn ich alles vermasselt habe, funktioniert gut beim Testen. Die einzige Möglichkeit, den Typ array zu ermitteln, war die Überprüfung auf length. Da Javascript Arrays wirklich als Objekte speichert, kann ich eigentlich nicht nach Typ array suchen (es gibt keinen solchen Typ!). Wenn jemand einen besseren Weg kennt, würde ich es gerne hören. Wenn Ihr Objekt auch über eine Eigenschaft mit dem Namen length verfügt, wird diese Funktion es fälschlicherweise als Array behandeln.

BEARBEITEN: Prüfung auf 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 toSource von FF gedruckt, da toSource die unendliche Rekursion einmal druckt. Diese Funktion bricht die Funktion sofort ab. Diese Funktion läuft langsamer als die oben genannte, daher füge ich sie hier hinzu, anstatt die obige Funktion zu bearbeiten, da sie nur erforderlich ist, wenn Sie beabsichtigen, Objekte zu übergeben, die an sich selbst zurückgeführt werden.

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, document.body zu drucken, ist ein schreckliches Beispiel. Zum einen gibt FF bei Verwendung von toSource nur eine leere Objektzeichenfolge aus. Bei Verwendung der obigen Funktion stürzt FF bei SecurityError: The operation is insecure. ab. Und Chrome wird auf Uncaught RangeError: Maximum call stack size exceeded abstürzen. Klar, document.body sollte nicht in eine Zeichenfolge konvertiert werden. Weil es entweder zu groß ist oder gegen Sicherheitsrichtlinien verstößt, um auf bestimmte Eigenschaften zuzugreifen. Es sei denn, ich habe hier oben etwas versaut.

10
Pimp Trizkit

Ich benutze immer console.log("object will be: ", obj, obj1). Auf diese Weise brauche ich die Problemumgehung mit stringify nicht mit JSON . Alle Eigenschaften des Objekts werden gut erweitert.

6
nils petersohn

Der einfachste Weg:

console.log(obj);

Oder mit einer Nachricht:

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

Das erste übergebene Objekt kann einen oder mehrere Formatbezeichner enthalten. Ein Formatbezeichner besteht aus dem Prozentzeichen (%), gefolgt von einem Buchstaben, der die anzuwendende Formatierung angibt.

Weitere Formatangaben

6
3DRobert

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

Objektinhalt drucken

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

Konsolenausgabe (Chrome DevTools):

John 0
Foo 1
Bar 2

Hoffentlich hilft das!

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

dabei ist object Ihr Objekt

oder Sie können dies in chrome dev tools, "console" tab:

console.log(object);

5
user3632930

Eine andere Möglichkeit, Objekte in der Konsole anzuzeigen, ist 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));
5
Kean Amaral

Einfach verwenden 

JSON.stringify(obj)

Beispiel

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

Oder 

alert(args_string);

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

Eigentlich können Sie so eine neue Eigenschaft zuweisen

foo.moo = "stackoverflow";
console.log(foo.moo);
4
Raza Rafaideen

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

4

Ich denke, die beste Lösung besteht darin, die Objektschlüssel und dann die Objektwerte durchzublättern, wenn Sie wirklich sehen wollen, was das Objekt enthält ...

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

Es wird etwas ausgegeben wie:  enter image description here (Abbildung oben: die im Objekt gespeicherten Schlüssel/Werte)

Diese neue Option gibt es auch, wenn Sie ECMAScript 2016 oder neuer verwenden: 

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

Dies erzeugt eine saubere Ausgabe:  enter image description here Die in einer früheren Antwort erwähnte Lösung: console.log(obj) zeigt zu viele Parameter an und ist nicht die benutzerfreundlichste Art, die gewünschten Daten anzuzeigen. Deshalb empfehle ich, Schlüssel und Werte separat zu protokollieren.

Next Up :

console.table(object)

Gibt so etwas auf der Konsole aus:  enter image description here

Endlich mein unbeliebtester:

console.log(object)

produziert etwas wie:  enter image description here

4

Hier ist eine Möglichkeit, dies zu tun:

console.log("%o", obj);
3
Anton Harniakou

Eine kleine Hilfsfunktion, die ich in meinen Projekten immer für das einfache und schnelle Debuggen über die Konsole verwende. Inspiration aus 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:
 enter image description here

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

 enter image description here

3
George Kagan

Eine weitere Modifikation des Pagewils-Codes ... sein druckt nichts anderes als Strings aus, lässt die Anzahl und die booleschen Felder leer und ich habe den Tippfehler auf den zweiten Typof genau 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;
};
2
ppetree

ich habe die Druckmethode von Pagewil verwendet und es hat sehr gut funktioniert. 

hier ist meine etwas erweiterte Version mit (schlampigen) Einrückungen und unterschiedlichen Prop/Ob-Trennzeichen:

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

Hier ist 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 Tabulatoreinzug mit Lesbarkeit anzeigen. 

2
Juho Sung

Wenn Sie nach etwas suchen, das eine verschönerte Zeichenfolge eines beliebigen JavaScript-Objekts zurückgeben kann, besuchen Sie https://github.com/fresheneesz/beautinator . Ein Beispiel:

var result = beautinator({ "font-size": "26px","font-family": "'Open Sans', sans-serif",color: "white", overflow: "hidden",padding: "4px 4px 4px 8px",Text: { display: "block", width: "100%","text-align": "center", "padding-left": "2px","Word-break": "break-Word"}})
console.log(result)

Ergebnisse in:

{ "font-size": "26px",
  "font-family": "'Open Sans', sans-serif",
  color: "white", overflow: "hidden",
  padding: "4px 4px 4px 8px",
  Text: { display: "block", width: "100%",
          "text-align": "center", "padding-left": "2px",
          "Word-break": "break-Word"
  }
}

Es funktioniert sogar, wenn in Ihrem Objekt Funktionen vorhanden sind.

1
B T

Eine einfache Möglichkeit, den Inhalt des Objekts anzuzeigen, ist die Verwendung von console.log (siehe unten)

console.log("Object contents are ", obj);

Bitte beachten Sie, dass ich nicht "+" verwende, um das Objekt zu verketten. Wenn ich '+' verwende, bekomme ich nur die Zeichenfolgendarstellung, wenn object, etwas wie [Object object].

0
Vikram

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

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

Und Sie werden unten eine übersichtliche und lesbare Tabelle sehen:  console.table

0
Alireza

Probier diese:

var object = this.window;
console.log(object,'this is window object');

Ausgabe:

 enter image description here

0
Elshan

Es funktioniert nicht in einem Browser und Sie benötigen dies möglicherweise nur, wenn Sie eine gültige JS-Darstellung für Ihr Objekt und keine JSON erhalten möchten. Es führt nur die Inline-Auswertung des Knotens aus 

var execSync = require('child_process').execSync

const objectToSource = (obj) =>
  execSync('node -e \'console.log(JSON.parse(`' + JSON.stringify(obj) + '`))\'', { encoding: 'utf8' })

console.log(objectToSource({ a: 1 }))
0
Yuriy Naydenov