web-dev-qa-db-fra.com

Imprimer le contenu de l'objet JavaScript?

Typiquement, si nous utilisons simplement alert(object);, il apparaîtra comme [object Object]. Comment imprimer tous les paramètres de contenu d'un objet en JavaScript?

javascriptobject
399
cometta

Si vous utilisez Firefox, alert(object.toSource()) devrait suffire à des fins de débogage simples.

313
Lukman

Cela vous donnera une très belle sortie avec un objet JSON en retrait:

alert(JSON.stringify(YOUR_OBJECT_HERE, null, 4));

Le deuxième argument modifie le contenu de la chaîne avant de la renvoyer. Le troisième argument spécifie le nombre d'espaces à utiliser comme espaces blancs pour la lisibilité.

688
Igor Jerosimić

En plus d'utiliser un débogueur, vous pouvez également accéder à tous les éléments d'un objet à l'aide d'une boucle foreach. La fonction printObject suivante devrait permettre à alert() votre objet d'afficher toutes les propriétés et les valeurs respectives.

function printObject(o) {
  var out = '';
  for (var p in o) {
    out += p + ': ' + o[p] + '\n';
  }
  alert(out);
}

// now test it:
var myObject = {'something': 1, 'other thing': 2};
printObject(myObject);

L'utilisation d'un outil d'inspection DOM est préférable car elle vous permet de creuser sous les propriétés qui sont des objets eux-mêmes. Firefox a FireBug mais tous les autres principaux navigateurs (IE, Chrome, Safari) ont aussi des outils de débogage intégrés que vous devriez vérifier.

73
Miguel Ventura

Si vous voulez seulement avoir une représentation sous forme de chaîne d'un objet, vous pouvez utiliser la fonction JSON.stringify, en utilisant une bibliothèque JSON .

28
CMS

Imprimer le contenu de l'objet que vous pouvez utiliser

console.log(obj_str);

vous pouvez voir le résultat dans la console comme ci-dessous.

Object {description: "test"}

Pour ouvrir la console, appuyez sur F12 dans le navigateur chrome, vous trouverez l'onglet de la console en mode débogage.

13
Nikunj K.

Vous pouvez utiliser le noeud til.inspect (objet) pour afficher la structure de l'objet.

Cela est particulièrement utile lorsque votre objet a des dépendances circulaires, par exemple.

$ node

var obj = {
   "name" : "John",
   "surname" : "Doe"
}
obj.self_ref = obj;

util = require("util");

var obj_str = util.inspect(obj);
console.log(obj_str);
// prints { name: 'John', surname: 'Doe', self_ref: [Circular] }

Si ce cas, JSON.stringify lève une exception: TypeError: Converting circular structure to JSON

12
Michal

Vous devriez envisager d'utiliser FireBug pour le débogage JavaScript. Il vous permettra d'inspecter de manière interactive toutes vos variables et même de passer en revue des fonctions.

8
Jonathan Feinberg

Utilisez dir (objet). Ou vous pouvez toujours télécharger Firebug pour Firefox (vraiment utile).

7
OverLex

Javascript pour tous!

String.prototype.repeat = function(num) {
    if (num < 0) {
        return '';
    } else {
        return new Array(num + 1).join(this);
    }
};

function is_defined(x) {
    return typeof x !== 'undefined';
}

function is_object(x) {
    return Object.prototype.toString.call(x) === "[object Object]";
}

function is_array(x) {
    return Object.prototype.toString.call(x) === "[object Array]";
}

/**
 * Main.
 */
function xlog(v, label) {
    var tab = 0;

    var rt = function() {
        return '    '.repeat(tab);
    };

    // Log Fn
    var lg = function(x) {
        // Limit
        if (tab > 10) return '[...]';
        var r = '';
        if (!is_defined(x)) {
            r = '[VAR: UNDEFINED]';
        } else if (x === '') {
            r = '[VAR: EMPTY STRING]';
        } else if (is_array(x)) {
            r = '[\n';
            tab++;
            for (var k in x) {
                r += rt() + k + ' : ' + lg(x[k]) + ',\n';
            }
            tab--;
            r += rt() + ']';
        } else if (is_object(x)) {
            r = '{\n';
            tab++;
            for (var k in x) {
                r += rt() + k + ' : ' + lg(x[k]) + ',\n';
            }
            tab--;
            r += rt() + '}';
        } else {
            r = x;
        }
        return r;
    };

    // Space
    document.write('\n\n');

    // Log
    document.write('< ' + (is_defined(label) ? (label + ' ') : '') + Object.prototype.toString.call(v) + ' >\n' + lg(v));
};



// Demo //

var o = {
    'aaa' : 123,
    'bbb' : 'zzzz',
    'o' : {
        'obj1' : 'val1',
        'obj2' : 'val2',
        'obj3' : [1, 3, 5, 6],
        'obj4' : {
            'a' : 'aaaa',
            'b' : null
        }
    },
    'a' : [ 'asd', 123, false, true ],
    'func' : function() {
        alert('test');
    },
    'fff' : false,
    't' : true,
    'nnn' : null
};

xlog(o, 'Object'); // With label
xlog(o); // Without label

xlog(['asd', 'bbb', 123, true], 'ARRAY Title!');

var no_definido;
xlog(no_definido, 'Undefined!');

xlog(true);

xlog('', 'Empty String');
3
Eduardo Cuomo

Vous pouvez utiliser json.js à partir de http://www.json.org/js.html pour modifier les données JSON en données chaîne.

2
hay

Vous pouvez donner à vos objets leurs propres méthodes toString dans leurs prototypes.

2
kennebec

Vous pouvez également utiliser la méthode Object.inspect () de Prototype, qui "Retourne la représentation sous forme de chaîne orientée débogage de l'objet".

http://api.prototypejs.org/language/Object/inspect/

2
snw

Fonction simple pour alerter le contenu d'un objet ou d'un tableau.
Appelez cette fonction avec un tableau, une chaîne ou un objet pour en alerter le contenu.

Une fonction

function print_r(printthis, returnoutput) {
    var output = '';

    if($.isArray(printthis) || typeof(printthis) == 'object') {
        for(var i in printthis) {
            output += i + ' : ' + print_r(printthis[i], true) + '\n';
        }
    }else {
        output += printthis;
    }
    if(returnoutput && returnoutput == true) {
        return output;
    }else {
        alert(output);
    }
}

Usage

var data = [1, 2, 3, 4];
print_r(data);
1
Rayiez

Internet Explorer 8 possède des outils de développement similaires à Firebug pour Firefox. Opera a Opera DragonFly et Google Chrome a également un élément appelé Outils de développement (Maj + Ctrl + J).

Voici une réponse plus détaillée pour déboguer JavaScript dans IE6-8: tilisation des 'Outils de développement' de IE8 pour déboguer des versions antérieures IE

0
gregers