Comment puis-je afficher un objet JavaScript?

Question

Comment afficher le contenu d'un objet JavaScript dans un format de chaîne comme quand on alert une variable?

De la même façon formatée je veux afficher un objet.

Answer 1

Si vous voulez 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)

Answer 2

Utiliser la méthode de JSON.stringify native. Fonctionne avec des objets imbriqués et tous les principaux navigateurs prennent en charge de rel="noreferrer"> 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 Mozilla API de référence et d'autres exemples.

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

---

Utilisez une coutume JSON.stringify succédané si vous rencontrer cette erreur Javascript

"Uncaught TypeError: Converting circular structure to JSON"

Answer 3

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

Answer 4

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 fonction console.dir() est non standard. Voir Web Docs MDN

Answer 5

essayez ceci:

console.log(JSON.stringify(obj))

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

Answer 6

Eh bien, Firefox (grâce à @Bojangles pour des informations détaillées) a Object.toSource() méthode qui imprime des objets comme JSON et function(){}.

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

Answer 7

Si vous voulez utiliser l'alerte, pour imprimer votre objet, vous pouvez faire ceci:

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

Il faut imprimer chaque propriété et sa valeur correspondante sous forme de chaîne.

Answer 8

Dans NodeJS vous pouvez imprimer un objet en utilisant util.inspect(obj) . Assurez-vous d'indiquer la profondeur ou vous aurez seulement une impression superficielle de l'objet.

Answer 9

Si vous souhaitez voir les données en format tableau, vous pouvez utiliser

console.table(obj);

Le tableau peut être triée 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 href="https://blog.mariusschulz.com/2013/11/13/advanced-javascript-debugging-with-consoletable"> console.table

Answer 10

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

Utilisation:

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

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

Exemple:

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

Answer 11

Comme il a été dit avant le mieux et le plus simplement que j'ai trouvé moyen

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

Answer 12

Utilisez ceci:

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

Answer 13

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

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

Les couleurs sont bien sûr en option, la « profondeur: null ». Imprimera l'objet complet

Les options ne semblent pas être pris 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

Answer 14

Si vous souhaitez imprimer l'objet de toute sa longueur, peut utiliser

  

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

Si vous voulez imprimer l'objet en le convertissant à la chaîne puis

  

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

Answer 15

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

Réinventer la roue ici! Aucune de ces solutions a travaillé pour ma situation. Donc, je trafiqué rapidement la réponse de pagewil. Celui-ci n'est pas pour l'impression à l'écran (via la console, ou textfield ou autre). Il est, cependant, pour le transport de données. Cette version semble renvoyer un résultat très similaire toSource(). Je n'ai pas essayé JSON.stringify, mais je suppose que cela est de la même chose. Le résultat de cette fonction est une déclaration d'objet Javascript valide.

Je ne doute pas si quelque chose comme cela était déjà quelque part SO, mais il était juste plus court pour le faire que de passer tout en recherchant des réponses passées. Et puisque cette question était mon TopHit sur Google quand je commencé à chercher à ce sujet; Je me suis peut mettre ici d'aider les autres.

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

Les tableaux sont stockés avec [] au lieu de {} et ne pas donc avoir des paires clé / valeur, juste valeurs. Comme les tableaux réguliers. , Ils sont créés comme les tableaux font donc.

En outre, toutes les chaînes (y compris les noms clés) sont cités, ce n'est pas nécessaire à moins que ces chaînes ont des caractères spéciaux (comme un espace ou une barre oblique). Mais, je ne me sentais pas comme la détection de cela juste pour supprimer certaines citations qui seraient autrement encore du travail bien.

Cette chaîne résultante peut alors être utilisé avec eval le dumping ou juste dans une var à travers la manipulation de chaînes. Ainsi, recréer à 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 je foiré le tout, fonctionne très bien dans mes tests. En outre, la seule façon que je pouvais penser à détecter le type array était de vérifier la présence de length. Parce que Javascript stocke vraiment des tableaux comme des objets, je ne peux pas vraiment vérifier pour le type array (il n'y a pas ce type!). Si quelqu'un sait d'autre une meilleure façon, j'aimerais entendre. Parce que, si votre objet a également une propriété nommée length alors cette fonction traitera par erreur comme un tableau.

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

EDIT: Voici la fonction fixe pour pouvoir imprimer des objets infiniment récursives. Cela n'imprime pas le même que celui de FF toSource parce toSource imprimera l'récursion infinie une fois, alors que, cette fonction va tuer immédiatement. Cette fonction est plus lent que celui ci-dessus, donc je l'ajouter ici au lieu de modifier la fonction ci-dessus, comme nécessaire que si vous envisagez de passer des objets qui pointent 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)+"]";
}

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

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

NOTE: Essayer d'imprimer document.body est un exemple terrible. D'une part, FF imprime juste une chaîne d'objet vide lors de l'utilisation toSource. Et lorsque vous utilisez la fonction ci-dessus, FF se bloque sur SecurityError: The operation is insecure.. Et Chrome se bloque sur Uncaught RangeError: Maximum call stack size exceeded. De toute évidence, document.body n'a pas été conçu pour être converti en chaîne. Parce que sa trop grande, ou contre la politique de sécurité pour accéder à certaines propriétés. À moins, je foiré quelque chose ici, ne le dites!

Answer 16

Je besoin d'un moyen d'imprimer de manière récursive l'objet, la réponse de pagewil fournie (la Merci!). Je mis à jour un peu d'inclure un moyen d'imprimer jusqu'à un certain niveau, et d'ajouter un espacement de sorte qu'il soit correctement en retrait basé sur le niveau actuel que nous sommes en sorte 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;
};

Utilisation:

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 17

Utilisez simplement

JSON.stringify(obj)

Exemple

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

ou

alert(args_string);

Notez également dans les fonctions javascript sont considérés comme des objets.

vous pouvez réellement attribuer de nouveaux biens comme celui-ci

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

Answer 18

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

encore moyen le plus utilisé d'abord mon préféré moins d'afficher un objet:

Ceci est la façon de montrer les defacto contenu d'un objet

console.log(yourObj)

produira quelque chose comme:

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

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

Il sera quelque chose de sortie comme: (Ci-dessus: les clés / valeurs stockées dans l'objet)

Il y a aussi cette nouvelle option si vous utilisez ECMAScript 2016 ou plus récent:

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

Cela produira une sortie nette: La solution mentionnée dans une réponse précédente: console.log(yourObj) affiche trop de paramètres et n'est pas la façon la plus facile à utiliser pour afficher les données que vous souhaitez . Voilà pourquoi je recommande les clés de l'exploitation forestière et les valeurs puis séparément.

Prochaine étape:

console.table(yourObj)

Quelqu'un dans un commentaire précédent a suggéré celui-ci, mais il n'a jamais travaillé pour moi. Si cela ne fonctionne pour quelqu'un d'autre sur un autre navigateur ou quelque chose, puis Kudos! Ill encore mis le code pour référence! Est-ce que quelque chose de sortie comme celui-ci à la console:

Answer 19

Voici une façon de le faire:

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

Answer 20

La façon la plus simple:

console.log(obj);

Ou avec un message:

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

Le premier objet que vous passez peut contenir un ou plusieurs formats spécificateurs. Un spécificateur de format est composé du signe pour cent (%), suivi d'une lettre indiquant la mise en forme à appliquer.

format plus spécificateurs

Answer 21

Je l'utilise toujours console.log("object will be: ", obj, obj1). Ainsi je ne pas besoin de faire la solution de contournement avec stringify avec JSON. Toutes les propriétés de l'objet seront étendues bien.

Answer 22

Une autre façon d'afficher des objets dans la console est avec JSON.stringify. Checkout 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));

Answer 23

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

où object est votre objet

ou vous pouvez utiliser dans les outils de dev chrome, onglet "console":

console.log(object);

Answer 24

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

Contenu de l'objet Imprimer

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

sortie Console (Chrome DevTools):

John 0
Foo 1
Bar 2

L'espoir qui aide!

Answer 25

Javascript Fonction

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

Impression objet

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

par print_r en Javascript

Answer 26

Une petite fonction d'aide, je l'utilise toujours dans mes projets simples, le débogage rapide via la console.  Inspiration prise 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) + ')');
}

Utilisation

Sorties dd(123.55);:

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

Answer 27

Je préfère utiliser console.table pour obtenir le format d'objet clair, alors imaginez-vous cet objet:

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

Et vous vous verrez une table propre et lisible comme ceci ci-dessous:

Answer 28

i utilisé la méthode d'impression de pagewil, et cela a fonctionné très bien.

voici ma version légèrement étendue avec tirets (bâclée) et prop / ob délimiteurs 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;
};

Answer 29

Une autre modification du code pagewils ... sa n'imprime pas autre chose que des chaînes et laisse le nombre et les champs booléens en blanc et je fixe la faute de frappe sur le deuxième 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;
};

Answer 30

est ici 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 l'objet à l'aide indent onglet avec lisibilité.