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.

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:

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

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"

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

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

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.

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.

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.

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

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.

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: '[email protected]',
        tel: '123456789'
    }  
}

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

Exemple:

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

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

Utilisez ceci:

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

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

Pour imprimer l'objet complet avec Node.js avec des couleurs en bonus:

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

Les couleurs sont bien sûr facultatives, 'depth: null' imprimera l'objet complet.

Les options ne semblent pas être prises en charge dans les navigateurs.

Références:

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

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

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:

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

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

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

Voici une façon de procéder:

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

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: '[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) ); 

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.

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

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

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

où objectest ton objet

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

console.log(object);

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!

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:

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:

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

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

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

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

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