web-dev-qa-db-fra.com

Comment imprimer un tableau d'objets en JavaScript?

J'ai créé un tableau d'objets en JavaScript. Comment puis-je imprimer le tableau d'objets dans la fenêtre du navigateur, similaire à la fonction print_r en PHP?

var lineChartData = [{
            date: new Date(2009, 10, 2),
            value: 5
        }, {
            date: new Date(2009, 10, 25),
            value: 30
        }, {
            date: new Date(2009, 10, 26),
            value: 72,
            customBullet: "images/redstar.png"
        }];
javascriptarraysobject
49
uvinod

Simplement stringify votre objet et assignez-le au innerHTML d’un élément de votre choix.

yourContainer.innerHTML = JSON.stringify(lineChartData);

Si vous voulez quelque chose de plus joli, faites

yourContainer.innerHTML = JSON.stringify(lineChartData, null, 4);


var lineChartData = [{
            date: new Date(2009, 10, 2),
            value: 5
        }, {
            date: new Date(2009, 10, 25),
            value: 30
        }, {
            date: new Date(2009, 10, 26),
            value: 72,
            customBullet: "images/redstar.png"
        }];

document.getElementById("whereToPrint").innerHTML = JSON.stringify(lineChartData, null, 4);
<pre id="whereToPrint"></pre>

Mais si vous ne faites que cela pour déboguer, vous feriez mieux de utiliser la console avec console.log(lineChartData).

103
Denys Séguret

Si vous utilisez Chrome, vous pouvez également utiliser

console.log( yourArray );
12
Toto-Graph

Avez-vous vérifié

console.table(yourArray);

Plus d'infos ici: https://developer.mozilla.org/en-US/docs/Web/API/Console/table

11
charlesdg

Il existe une merveilleuse implémentation print_r pour JavaScript dans la bibliothèque php.js.

Notez que vous devez également ajouter echo support dans le code.

DEMO: _ ​​ http://jsbin.com/esexiw/1

7
VisioN

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);
3
Rayiez
document.getElementById('container').innerHTML = lineChartData[array_index]
1
bhupesh

Emm ... Pourquoi ne pas utiliser quelque chose comme ça?

function displayArrayObjects(arrayObjects) {
        var len = arrayObjects.length, text = "";

        for (var i = 0; i < len; i++) {
            var myObject = arrayObjects[i];
            
            for (var x in myObject) {
                text += ( x + ": " + myObject[x] + " ");
            }
            text += "<br/>";
        }

        document.getElementById("message").innerHTML = text;
    }
            
            
            var lineChartData = [{
                date: new Date(2009, 10, 2),
                value: 5
            }, {
                date: new Date(2009, 10, 25),
                value: 30
            }, {
                date: new Date(2009, 10, 26),
                value: 72,
                customBullet: "images/redstar.png"
            }];

            displayArrayObjects(lineChartData);
<h4 id="message"></h4>

résultat:

date: Mon Nov 02 2009 00:00:00 GMT+0200 (FLE Standard Time) value: 5 
date: Wed Nov 25 2009 00:00:00 GMT+0200 (FLE Standard Time) value: 30 
date: Thu Nov 26 2009 00:00:00 GMT+0200 (FLE Standard Time) value: 72 customBullet: images/redstar.png

jsfiddle

0
Gennady G

J'utilise la fonction ci-dessous pour afficher une lecture dans le journal de la console Firefox:

////        make printable string for console readout, recursively
var make_printable_object = function(ar_use)
{
////        internal arguments
var in_tab = arguments[1];
var st_return = arguments[2];
////        default vales when applicable
if (!in_tab) in_tab = 0;
if (!st_return) st_return = "";
////        add depth
var st_tab = "";
for (var i=0; i < in_tab; i++) st_tab = st_tab+"-~-~-";

////        traverse given depth and build string
for (var key in ar_use)
{
    ////        gather return type
    var st_returnType = typeof ar_use[key];
    ////        get current depth display
    var st_returnPrime = st_tab+ "["+key+"] ->"+ar_use[key]+"< is {"+st_returnType+"}";
    ////        remove linefeeds to avoid printout confusion
    st_returnPrime = st_returnPrime.replace(/(\r\n|\n|\r)/gm,"");
    ////        add line feed
    st_return = st_return+st_returnPrime+"\n";
    ////         stop at a depth of 15
    if (in_tab>15) return st_return;
    ////        if current value is an object call this function
    if ( (typeof ar_use[key] == "object") & (ar_use[key] != "null") & (ar_use[key] != null) ) st_return = make_printable_object(ar_use[key], in_tab+1, st_return);


}

////        return complete output
return st_return;

};

Exemple: 

console.log( make_printable_object( some_object ) );

Alternativement , vous pouvez simplement remplacer:

st_return = st_return+st_returnPrime+"\n";

avec 

st_return = st_return+st_returnPrime+"<br/>";

imprimer sur une page HTML.

0
Shawn

Vous pouvez simplement utiliser la syntaxe suivante et l'objet sera entièrement affiché dans la console:

console.log('object evt: %O', object);

J'utilise le navigateur Chrome, mais je ne sais pas s'il est adaptable à d'autres navigateurs.

0
Torsten Barthel

j'utilise ma fonction personnalisée pour imprimer un tableau dans la console 

this.print = function (data,bpoint=0) {
    var c = 0;
    for(var k=0; k<data.length; k++){
        c++;
        console.log(c+'  '+data[k]);
        if(k!=0 && bpoint === k)break;  
    }
}

utilisation: print (array);
ou print (tableau, 50); // 50 valeur à imprimer uniquement 

0
user889030