Comment afficher un objet JavaScript?


1618

Comment afficher le contenu d'un objet JavaScript dans un format de chaîne comme lorsque nous avons alertune variable?

De la même manière formatée, je veux afficher un objet.


7
Pourriez-vous reformuler votre question? Qu'entendez-vous par «voie formatée»? Comme dans, avec un formatage riche, comme gras / italique / etc?
Sasha Chedygov

existe-t-il un moyen d'afficher la valeur d'exécution d'une variable en imprimant la valeur de la variable à l'aide de certaines commandes de la console?
BlackPanther

1
@BlackPanther Faites-le console.log("", yourObject1, yourObject2, yourObject3, etc...);. Une version plus courte est à faire console.log(yourObject1, yourObject2, etc...);.
tom_mai78101

2
Pouvez-vous sélectionner une meilleure réponse qui reflète plus précisément le consensus de la communauté?
HoldOffHunger

Comme çaconsole.log('a string', aNumber, anObject)
onmyway133

Réponses:


1069

Si vous souhaitez imprimer l'objet à des fins de débogage, utilisez le code:

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

Affichera:

console de capture d'écran chrome

Remarque: vous devez uniquement enregistrer l'objet. Par exemple, cela ne fonctionnera pas:

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

Remarque ' : Vous pouvez également utiliser une virgule dans la logméthode, puis la première ligne de la sortie sera la chaîne et ensuite l'objet sera rendu:

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

43
Cette fonction fonctionne également sur Google Chrome lorsque vous utilisez la console JavaScript (Maj + Contrôle + J ou Maj + Contrôle + I, selon la version de Chrome). Notez également que cela console.log(obj1, obj2)fonctionne très bien, vous n'avez donc pas à appeler console.log()chaque objet lors de la journalisation de plusieurs variables. N'oubliez pas également de supprimer tous ces appels en production, car cela briserait les navigateurs qui ne l'implémentent pas (comme Internet Explorer).
Felix

102
Oui, il imprime [objet Object] mais il a un petit bouton expando-toggly à côté qui vous permet d'inspecter le contenu de l'objet.
Hugh

12
@hughes, il peut réellement faire les deux. j'ai un objet que j'ai créé avec: var obj = {"foo": false}; et un autre objet qui est passé dans un rappel depuis un serveur, celui qui est passé par le rappel s'imprime avec la petite flèche pour que vous puissiez l'ouvrir, celui créé statiquement imprime simplement [objet objet] sans flèche. J'essaie de comprendre cela aussi, d'autres pensées?
benstraw

124
console.log("id:"+obj);ne sortira pas correctement car il sort une chaîne telle que vous la voyez là-bas, vous devez la spécifier comme ceci:console.log("id:"); console.log(obj);
Anriëtte Myburgh

14
Essayez console.log(JSON.stringify(obj))ouconsole.dir(obj)
Robot Boy

2013

Utilisez une JSON.stringifyméthode native . Fonctionne avec des objets imbriqués et tous les principaux navigateurs prennent en charge cette méthode.

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()

Lien vers la référence de l'API Mozilla et d'autres exemples.

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

Utilisez un remplaçant JSON.stringify personnalisé si vous rencontrez cette erreur Javascript

"Uncaught TypeError: Converting circular structure to JSON"

327
Pour une sortie plus lisible, essayez JSON.stringify (obj, null, 4). Cela va l'écrire sous forme de texte parfaitement en retrait
Ben Clayton

2
JSON.stringify ne peut afficher qu'un petit sous-ensemble de valeurs javascript et lèvera une exception pour le reste - console.log n'a pas ce problème.
Rappelez

11
Si vous êtes un débutant comme moi, n'oubliez pas console.logieconsole.log(JSON.stringify(obj,null, 4));
nilesh

2
"TypeError non capturé: conversion d'une structure circulaire en JSON" lorsque ob = fenêtre.
Michael

1
J'ai eu des cas où cela ne fonctionnait pas: cela se montrait {}pour un objet non vide. Assurez-vous donc de vérifier avec console.log(obj)avant de penser que votre objet est vide lors du strigify()retour {}.
Sindarus

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

1
C'est exactement ce que je veux. J'utilise google maps v3 et le rendu de direction renvoie un objet. Cela a quatre éléments et le nom d'un objet ne cesse de changer, nous devons donc le trouver. Pour cela, cette méthode a vraiment aidé. Outre cela, nous pouvons obtenir tous les noms des propriétés et des objets. Ou existe-t-il un autre moyen de trouver les noms des objets et des propriétés?
Jayapal Chandran

35
+1, tout le javascript n'est pas exécuté dans les navigateurs ou peut être débogué dans ceux-ci.
Bill Yang

3
Vous voudrez probablement masquer la cruauté intégrée avec hasOwnProperty la plupart du temps.
John

9
Omg - 0: [; 1: o; 2: b; 3: j; 4: e; 5: c; 6: t; 7: ; 8: O; 9: b; 10: j; 11: e; 12: c; 13: t; 14:];
JSideris

1
Un peu tard pour trouver cela, mais comme cela a été demandé lors de mon anniversaire l'année dernière (29 août), voici un violon de travail. jsfiddle.net/MrMarlow/fq53o6o9
MrMarlow

124

console.dir(object):

Affiche une liste interactive des propriétés d'un objet JavaScript spécifié. Cette liste vous permet d'utiliser des triangles de divulgation pour examiner le contenu des objets enfants.

Notez que la console.dir()fonctionnalité n'est pas standard. Voir les documents Web MDN


1
Oui, c'est une bonne solution, mais cela ne fonctionne que si vous ne souhaitez enregistrer que l'objet (par exemple console.dir (obj)). Dans le cas où vous souhaitez concaténer une piqûre à la sortie, cela vous donnera [objet Object].
Zoman

Un énorme avantage console.direst que vous pouvez toujours développer et lire les valeurs dans votre console après que la variable a été récupérée. Ceci est décrit dans un autre article SO ici
Dawson B

Et un autre avantage console.direst que lorsque vous enregistrez la console dans un fichier, toutes les propriétés sont dans le fichier comme prévu. Cela ne se produit pas uniquement avec console.log.
Kepi

79

essaye ça :

console.log(JSON.stringify(obj))

Cela imprimera la version stringify de l'objet. Ainsi, au lieu d' [object]une sortie, vous obtiendrez le contenu de l'objet.


7
typeerror: Converting circular structure to JSON?
Kaiden Prince

@KaidenPrince voyez cette réponse pour votre erreur: stackoverflow.com/questions/4816099/… Il s'agit probablement d'un élément DOM dans votre objet. Si tel est le cas, il est préférable de simplement vous connecter à la console dans Chrome ou Firefox et de l'inspecter. Sinon, vous devez supprimer tous les éléments circulaires avant que JSON.stringify soit appelé pour qu'il fonctionne.
Ace Hyzer

La solution consiste à simplement diviser en 2 commandes distinctes croyez-le ou non: console.log ("id:"); console.log (obj);
Collin Chaffin

66

Eh bien, Firefox (merci à @Bojangles pour des informations détaillées) a une Object.toSource()méthode qui imprime les objets en JSON et function(){}.

C'est suffisant pour la plupart des objectifs de débogage, je suppose.


6
Object.toSource () ne semble pas fonctionner pour Chrome, est-ce attendu? Ou Chrome ne relève-t-il pas des "navigateurs avancés"? =)
tstyle

44
Ancien fil, vient de le trouver via Google. .toSource()est en fait Firefox uniquement . Je pensais juste que je te ferais savoir.
Bojangles

52

Si vous souhaitez utiliser alert, pour imprimer votre objet, vous pouvez le faire:

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

Il doit imprimer chaque propriété et sa valeur correspondante au format chaîne.


18
toSource () ne fonctionne pas dans les navigateurs non gecko (par exemple Chrome, Safari)
Yarin

37

Si vous souhaitez voir les données sous forme de tableau, vous pouvez utiliser

console.table(obj);

Le tableau peut être trié si vous cliquez sur la colonne du tableau.

Vous pouvez également sélectionner les colonnes à afficher:

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

Vous pouvez trouver plus d'informations sur console.table ici


34

Dans NodeJS, vous pouvez imprimer un objet à l'aide de util.inspect(obj). Assurez-vous d'indiquer la profondeur ou vous n'aurez qu'une impression peu profonde de l'objet.


33

Une fonction:

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

Usage:

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

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

Exemple:

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


Méthode d'impression appeler le navigateur pour imprimer la page au format pdf: p
Marwen Trabelsi

@jsh vous devez retourner le if-else et vérifier l'objet au lieu de la seule chaîne. violon mis à jour: jsfiddle.net/6eqMn/594
Michael Walter

1
@wilsonpage Cela échoue si j'ajoute une valeur entière à la propriété tel :(
ni3

26

Utilisez simplement

JSON.stringify(obj)

Exemple

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

Ou

alert(args_string);

De plus, les fonctions en javascript sont considérées comme des objets.

Comme note supplémentaire:

En fait, vous pouvez attribuer une nouvelle propriété comme celle-ci et y accéder console.log ou l'afficher en alerte

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

1
La question elle-même dit: «Comme lorsque nous« alertons »une variable», ce n'est donc pas vraiment une réponse. Et votre autre option "JSON.stringify (obj)" a déjà été mentionnée dans "27 novembre 2010", vous ne faites qu'encombrer cette question de doublons et de non-réponses. Votre point sur l'attribution de nouvelles propriétés est également insensé dans ce contexte.
Paul


18

Comme il a été dit auparavant, la manière la plus simple et la plus simple que j'ai trouvée était

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

C'est la solution la plus simple et la plus rapide, mais elle ne fonctionne pas sur les gros objets tels que navigator.
someguy234


16

NB: Dans ces exemples, yourObj définit l'objet que vous souhaitez examiner.

Tout d'abord, ma façon la moins préférée mais la plus utilisée d'afficher un objet:

C'est la façon de facto de montrer le contenu d'un objet

console.log(yourObj)

produira quelque chose comme: entrez la description de l'image ici

Je pense que la meilleure solution est de regarder à travers les clés des objets, puis à travers les valeurs des objets si vous voulez vraiment voir ce que contient l'objet ...

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

Il produira quelque chose comme: entrez la description de l'image ici (photo ci-dessus: les clés / valeurs stockées dans l'objet)

Il existe également cette nouvelle option si vous utilisez ECMAScript 2016 ou une version plus récente:

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

Cela produira une sortie soignée: entrez la description de l'image ici La solution mentionnée dans une réponse précédente: console.log(yourObj)affiche trop de paramètres et n'est pas la manière la plus conviviale d'afficher les données que vous voulez . C'est pourquoi je recommande les clés de journalisation, puis les valeurs séparément.

Ensuite:

console.table(yourObj)

Quelqu'un dans un commentaire précédent a suggéré celui-ci, mais cela n'a jamais fonctionné pour moi. Si cela fonctionne pour quelqu'un d'autre sur un autre navigateur ou quelque chose, alors bravo! Je mettrai toujours le code ici pour référence! Sortira quelque chose comme ça sur la console: entrez la description de l'image ici


Pourriez-vous développer l'exemple pour inclure Object et obj.
historystamp

Je ne suis pas sûr de comprendre le commentaire, mais j'ai ajouté des noms différents pour les objets qui devraient avoir un nom. l'objet n'était pas suffisamment explicite.
Max Alexander Hanna

console.table(yourObj) travaillé pour moi sur Google Chrome version 77.0.3865.90 (version officielle) (64 bits). Merci d'avoir partagé!
Devner

15

(Cela a été ajouté à ma bibliothèque sur GitHub )

Réinventer la roue ici! Aucune de ces solutions n'a fonctionné pour ma situation. J'ai donc rapidement trafiqué la réponse de Wilsonpage . Celui-ci n'est pas destiné à l'impression sur écran (via la console, le champ de texte ou autre). Cela fonctionne bien dans ces situations et fonctionne très bien comme l'OP l'a demandé alert. De nombreuses réponses ici ne traitent pas de l'utilisation alertcomme l'OP l'a demandé. Quoi qu'il en soit, il est cependant formaté pour le transport de données. Cette version semble renvoyer un résultat très similaire à toSource(). Je n'ai pas testé contre JSON.stringify, mais je suppose que c'est à peu près la même chose. Cette version ressemble plus à un poly-fil afin que vous puissiez l'utiliser dans n'importe quel environnement. Le résultat de cette fonction est une déclaration d'objet Javascript valide.

Je ne douterais pas si quelque chose comme ça était déjà sur SO quelque part, mais c'était juste plus court à faire que de passer un peu de temps à chercher les réponses passées. Et puisque cette question a été mon principal succès sur Google lorsque j'ai commencé à chercher à ce sujet; Je pensais que le mettre ici pourrait aider les autres.

Quoi qu'il en soit, le résultat de cette fonction sera une représentation sous forme de chaîne de votre objet, même si votre objet a des objets et des tableaux intégrés, et même si ces objets ou tableaux ont encore d'autres objets et tableaux intégrés. (Je vous ai entendu aimer boire? Alors, j'ai pimpé votre voiture avec une glacière. Et puis, j'ai pimpé votre glacière avec une glacière. Donc, votre glacière peut boire pendant que vous êtes cool.)

Les tableaux sont stockés avec []au lieu de {}et n'ont donc pas de paires clé / valeur, juste des valeurs. Comme des tableaux réguliers. Par conséquent, ils sont créés comme le font les tableaux.

De plus, toutes les chaînes (y compris les noms de clés) sont citées, ce n'est pas nécessaire à moins que ces chaînes aient des caractères spéciaux (comme un espace ou une barre oblique). Mais, je n'avais pas envie de détecter cela juste pour supprimer des citations qui, sinon, fonctionneraient toujours bien.

Cette chaîne résultante peut ensuite être utilisée avec evalou simplement la vider dans une manipulation de chaîne à travers. Ainsi, recréez à nouveau votre objet, à partir du texte.

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

Faites-moi savoir si j'ai tout gâché, fonctionne bien dans mes tests. De plus, la seule façon dont je pouvais penser pour détecter le type arrayétait de vérifier la présence de length. Parce que Javascript stocke vraiment les tableaux en tant qu'objets, je ne peux pas vérifier le type array(il n'y en a pas!). Si quelqu'un d'autre connaît une meilleure façon, j'aimerais l'entendre. Parce que, si votre objet a également une propriété nommée, lengthcette fonction le traitera par erreur comme un tableau.

EDIT: Ajout d'une vérification pour les objets de valeur nulle. Merci Brock Adams

EDIT: Ci-dessous est la fonction fixe pour pouvoir imprimer des objets infiniment récursifs. Cela n'imprime pas la même chose qu'à toSourcepartir de FF car toSourceimprimera une fois la récursion infinie, où as, cette fonction la tuera immédiatement. Cette fonction s'exécute plus lentement que celle ci-dessus, donc je l'ajoute ici au lieu de modifier la fonction ci-dessus, car elle n'est nécessaire que si vous prévoyez de passer des objets qui se lient à eux-mêmes, quelque part.

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

Tester:

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());

Résultat:

{'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}})

REMARQUE: Essayer d'imprimer document.bodyest un exemple terrible. D'une part, FF imprime simplement une chaîne d'objet vide lors de l'utilisation toSource. Et lorsque vous utilisez la fonction ci-dessus, FF se bloque SecurityError: The operation is insecure.. Et Chrome va planter Uncaught RangeError: Maximum call stack size exceeded. De toute évidence, document.bodyn'était pas destiné à être converti en chaîne. Parce que c'est soit trop grand, soit contre la politique de sécurité pour accéder à certaines propriétés. Sauf si j'ai foiré quelque chose ici, dites-le!


Sujet aux accidents. Essayez ObjToSource(document.body), par exemple.
Brock Adams

ok, j'ai trouvé le problème. Je ne cherchais pas d'objets à valeur nulle. C'est réglé maintenant. Mais, vous ne pouvez toujours pas le faire à ObjToSource(document.body)cause de la récursion infinie. Même document.body.toSource()dans FireFox retourne un objet vide.
Pimp Trizkit

@BrockAdams - Il est maintenant résolu pour une récursion infinie, mais document.bodyn'est toujours pas imprimable. Voir la note.
Pimp Trizkit

document.bodyétait juste un raccourci pour signaler quelques gros problèmes. Vous avez maintenant corrigé le pire de ceux-ci et j'ai déjà voté. (Bien que, je crois qu'une approche différente pourrait gérer document.body. La plupart des réponses ici ne seraient pas non plus contre.)
Brock Adams

Eh bien, si vous (ou quelqu'un d'autre) avez une idée de comment contourner le fait qu'un objet aussi grand remplira la pile pendant la récursivité ou contourner les restrictions de sécurité. J'adorerais l'entendre. Merci pour le vote!
Pimp Trizkit

14

Si vous souhaitez imprimer l'objet sur toute sa longueur, vous pouvez utiliser

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

Si vous souhaitez imprimer l'objet en le convertissant en chaîne,

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


vous devrez ajouter le JSON.stringifylorsque vous essayez de concaténer avec un objet chaîne. Si vous utilisez console.log(object), il devrait assez imprimer le contenu de l'objet
Satadru Biswas

12

Voici une façon de procéder:

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

Intéressant. Y a-t-il d'autres informations à ce sujet?
Luke

Dans le contexte de Chrome-dev-tool, google l'a mentionné dans ce lien . se référant à la section "Substitution de chaîne et formatage"
chaco

Je l'ai vu dans les documents mdn .
Anton Harniakou

2
Réponse donc sous-estimée, c'est exactement ce que je cherchais.
Shubham Kushwah

11

J'avais besoin d'un moyen d'imprimer récursivement l'objet, ce que la réponse de pagewil a fourni (merci!). Je l'ai mis à jour un peu pour inclure un moyen d'imprimer jusqu'à un certain niveau et d'ajouter un espacement afin qu'il soit correctement indenté en fonction du niveau actuel dans lequel nous nous trouvons afin qu'il soit plus lisible.

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

Usage:

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

A besoin de travail. Il manque des virgules, des citations, etc.
posfan12

6

J'utilise toujours console.log("object will be: ", obj, obj1). de cette façon, je n'ai pas besoin de faire le contournement avec stringify avec JSON. Toutes les propriétés de l'objet seront bien développées.


6

Une autre façon d'afficher des objets dans la console est d'utiliser JSON.stringify. Découvrez l'exemple ci-dessous:

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

Fonction Javascript

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

Objet d'impression

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

via print_r en Javascript


Je ne sais pas s'il s'agit d'un bogue dans l'exemple js.do que j'utilise, mais cela ne semble produire que la première "branche" complète de l'arborescence. c'est à dire qu'il suit la première référence de la première référence ... ad infinitum
Jon Story

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

objectest ton objet

ou vous pouvez l'utiliser dans les outils de développement Chrome, onglet "console":

console.log(object);


Je pense que votre réponse est incomplète. (pas moi qui cause le downvote) Ceci, pour l'instant, n'imprime que la clé ..
Abdillah

1
merci pour votre réponse, cela m'a inspiré pour faire ceci: console.log(Object.keys(object));alors que je sais que n'imprime que les clés des propriétés, cela me suffit pour mes besoins;)
Wilson

5

Supposons un objet obj = {0:'John', 1:'Foo', 2:'Bar'}

Imprimer le contenu de l'objet

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

Sortie console (Chrome DevTools):

John 0
Foo 1
Bar 2

J'espère que cela pourra aider!


4

Je préfère utiliser console.tablepour obtenir un format d'objet clair, alors imaginez que vous avez cet objet:

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

Et vous verrez un tableau net et lisible comme celui-ci ci-dessous: console.table


3

Une petite fonction d'aide que j'utilise toujours dans mes projets pour un débogage simple et rapide via la console. Inspiration tirée de 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) + ')');
}

Usage

dd(123.55); les sorties:
entrez la description de l'image ici

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

entrez la description de l'image ici


3

Vous pouvez également utiliser le concept littéral de modèle ES6 pour afficher le contenu d'un objet JavaScript dans un format de chaîne.

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

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


2

J'ai utilisé la méthode d'impression de Pagewil, et cela a très bien fonctionné.

voici ma version légèrement étendue avec des indentations (bâclées) et des délimiteurs prop / ob distincts:

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

C'est très bâclé.
posfan12

2

Une autre modification du code de pagewils ... le sien n'imprime rien d'autre que des chaînes et laisse le nombre et les champs booléens vides et j'ai corrigé la faute de frappe sur le second typeof juste à l'intérieur de la fonction créée par megaboss.

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

Voici la fonction.

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

Il peut montrer un objet en utilisant un retrait de tabulation avec lisibilité.


Coup
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.