Comment puis-je afficher un objet JavaScript?
Comment puis-je afficher le contenu d'un objet JavaScript dans un format de chaîne comme lorsque nous alert une variable?
De la même manière, je veux afficher un objet.
Avec Firefox
Si vous souhaitez imprimer l'objet à des fins de débogage, je suggère plutôt d'installer Firebug pour Firefox et d'utiliser le code:
console.log(obj)
Avec Chrome
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)
Utiliser la méthode native JSON.stringify . Fonctionne avec les objets imbriqués et tous les principaux navigateurs support avec 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 Reference et d'autres exemples.
obj = JSON.parse(str); // Reverses above operation (Just in case if needed.)
Utilisez un remplaçant personnalisé JSON.stringify 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 révélation pour examiner le contenu des objets enfants.
Notez que la fonctionnalité console.dir() est non standard. Voir Documents Web MDN
essaye ça :
console.log(JSON.stringify(obj))
Ceci imprimera la version stringify de l'objet. Donc, au lieu de [object] en sortie, vous obtiendrez le contenu de l'objet.
Eh bien, Firefox (merci à @Bojangles pour des informations détaillées) utilise la méthode Object.toSource() qui permet d’imprimer des objets au format JSON et function(){}.
C'est suffisant pour la plupart des objectifs de débogage, je suppose.
Si vous voulez utiliser alert, pour imprimer votre objet, vous pouvez faire ceci:
alert("myObject is " + myObject.toSource());
Il convient d’imprimer chaque propriété et la valeur correspondante au format chaîne.
Dans NodeJS, vous pouvez imprimer un objet à l’aide de util.inspect(obj) . Assurez-vous d'indiquer la profondeur ou vous aurez seulement une impression superficielle 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;
}
Utilisation:
var myObject = {
name: 'Wilson Page',
contact: {
email: '[email protected]',
tel: '123456789'
}
}
$('body').append( print(myObject) );
Exemple:
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
Comme il a été dit auparavant, le meilleur moyen que j’ai trouvé é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 optionnelles, 'profondeur: null' imprimera tout l'objet.
Les options ne semblent pas être supportées par 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
Utilisez ceci:
console.log('print object: ' + JSON.stringify(session));
Si vous souhaitez imprimer l'objet de toute sa longueur, pouvez utiliser
console.log (require ('util'). inspect (obj, {showHidden: false, profondeur: null})
Si vous voulez imprimer l'objet en le convertissant en chaîne, alors
console.log (JSON.stringify (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 un peu mis à jour pour inclure un moyen d'imprimer jusqu'à un certain niveau, et pour ajouter un espacement afin qu'il soit correctement mis en retrait 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) );
(Ceci 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 corrigé la réponse de Pagewil. Celui-ci ne doit pas être imprimé à l'écran (via une console, un champ de texte ou autre). Il s’agit toutefois du 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 c'est à peu près la même chose. Le résultat de cette fonction est une déclaration d'objet Javascript valide.
Je ne doutais pas que quelque chose comme cela se trouvait déjà quelque part sur SO, mais c'était plus court pour le faire que pour passer un certain temps à chercher les réponses précédentes. Et puisque cette question a été mon principal succès sur Google lorsque j'ai commencé à chercher à ce sujet; J'ai pensé 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 celui-ci comporte des objets et des tableaux incorporés, et même si ces objets ou ces tableaux contiennent des objets et des tableaux encore plus incorporés. (J'ai entendu dire que tu aimais boire? Alors, j'ai chauffé ta voiture avec une glacière. Et ensuite, j'ai chauffé ta glacière avec une glacière. Ainsi, ta glacière peut boire, pendant que tu es cool.)
Les tableaux sont stockés avec [] au lieu de {} et n'ont donc pas de paires clé/valeur, mais uniquement des valeurs. Comme des tableaux ordinaires. Par conséquent, ils sont créés comme les tableaux.
De plus, toutes les chaînes (y compris les noms de clés) sont entre guillemets. Cela n'est pas nécessaire sauf si ces chaînes ont des caractères spéciaux (comme un espace ou une barre oblique). Mais je n'avais pas envie de détecter cela simplement pour supprimer certaines citations qui autrement fonctionneraient toujours bien.
Cette chaîne résultante peut ensuite être utilisée avec eval ou simplement en la vidant dans une manipulation de chaîne var thru. Ainsi, recréez à nouveau votre objet, à partir de 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é, ça marche bien dans mes tests. De plus, la seule façon de détecter le type array était de vérifier la présence de length. Parce que Javascript stocke vraiment les tableaux sous forme d'objets, je ne peux pas vérifier le type array (ce type n'existe pas!). Si quelqu'un d'autre connaît un meilleur moyen, j'aimerais l'entendre. En effet, si votre objet possède également une propriété nommée length, cette fonction le traitera par erreur comme un tableau.
ÉDITER: Ajout d'une vérification pour les objets à valeur nulle. Merci Brock Adams
EDIT: Ci-dessous se trouve la fonction fixe pour pouvoir imprimer des objets infiniment récursifs. Cela n’imprime pas la même chose que toSource à partir de FF car toSource imprimera la récursion infinie une fois, alors qu’en tant que, cette fonction le tuera immédiatement. Cette fonction étant plus lente que la précédente, je l’ajoute ici au lieu de la modifier, car elle n’est nécessaire que si vous prévoyez de transmettre des objets liés à 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.body est un exemple terrible. D'une part, FF imprime simplement une chaîne d'objet vide lors de l'utilisation de toSource. Et lorsque vous utilisez la fonction ci-dessus, FF se bloque sur SecurityError: The operation is insecure.. Et Chrome va planter sur Uncaught RangeError: Maximum call stack size exceeded. Clairement, document.body n'était pas destiné à être converti en chaîne. Parce que c'est trop important ou contre la politique de sécurité pour accéder à certaines propriétés. À moins que je me suis trompé quelque chose ici, dites-le!
J'utilise toujours console.log("object will be: ", obj, obj1). De cette façon, je n'ai pas besoin de faire la solution de contournement avec stringify avec JSON . Toutes les propriétés de l'objet seront bien développées.
Le moyen le plus simple:
console.log(obj);
Ou avec un message:
console.log("object is: %O", obj);
Le premier objet que vous transmettez peut contenir un ou plusieurs spécificateurs de format. Un spécificateur de format est composé du signe de pourcentage (%) suivi d'une lettre indiquant le formatage à appliquer.
Supposer l'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 de la console (Chrome DevTools):
John 0
Foo 1
Bar 2
J'espère que cela pourra aider!
Une autre façon d’afficher des objets dans la console consiste à utiliser JSON.stringify. Commander 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));
Simplement utiliser
JSON.stringify(obj)
Exemple
var args_string = JSON.stringify(obj);
console.log(args_string);
Ou
alert(args_string);
Notez également que les fonctions javascript sont considérées comme des objets.
En fait, vous pouvez assigner une nouvelle propriété comme celle-ci
foo.moo = "stackoverflow";
console.log(foo.moo);
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>
Je pense que la meilleure solution est de regarder à travers les clés d'objets, puis à travers les valeurs d'objets si vous voulez vraiment voir ce que l'objet contient ...
console.log(Object.keys(obj));
console.log(Object.values(obj));
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(obj).forEach(e => console.log(`key=${e} value=${obj[e]}`));
Cela produira une sortie soignée: 
La solution mentionnée dans une réponse précédente: console.log(obj) affiche trop de paramètres et n’est pas le moyen le plus convivial d’afficher les données souhaitées. C'est pourquoi je recommande de consigner les clés, puis les valeurs séparément.
Ensuite:
console.table(object)
Produira quelque chose comme ceci sur la console: 
Enfin mon moins préféré:
console.log(object)
produira quelque chose comme: 
Voici un moyen de le faire:
console.log("%o", obj);
Une petite fonction d'aide que j'utilise toujours dans mes projets pour un débogage simple et 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
dd(123.55); génère:
var obj = {field1: 'xyz', field2: 2016};
dd(obj, 'My Cool Obj');
Une autre modification du code pagewils ... sa n'imprime rien d'autre que des chaînes et laisse les champs numériques et booléens vides et j'ai corrigé la faute de frappe sur le second type situé à 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;
};
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 retraits (négligés) 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;
};
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 le retrait de tabulation avec lisibilité.
Si vous cherchez quelque chose qui puisse renvoyer une chaîne précise de n'importe quel objet javascript, consultez https://github.com/fresheneesz/beautinator . Un exemple:
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)
Résulte en:
{ "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"
}
}
Cela fonctionne même s'il y a des fonctions dans votre objet.
Un moyen simple d'afficher le contenu de l'objet consiste à utiliser console.log comme indiqué ci-dessous.
console.log("Object contents are ", obj);
Veuillez noter que je n'utilise pas '+' pour concaténer l'objet. Si j'utilise '+', je n'aurai que la représentation sous forme de chaîne if object, quelque chose comme [Object object].
Je préfère utiliser console.table pour 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 ci-dessous: 
Essaye celui-là:
var object = this.window;
console.log(object,'this is window object');
Sortie:
Cela ne fonctionnera pas dans un navigateur et vous pourriez en avoir besoin uniquement si vous souhaitez obtenir une représentation JS valide pour votre objet et non un JSON. Il ne fait que lancer l'évaluation en ligne des nœuds
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 }))