recuperer - tableau javascript html




Comment imprimer un tableau d'objets en JavaScript? (7)

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


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


Il y a une merveilleuse implémentation print_r pour JavaScript dans la librairie php.js.

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

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


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 dans une page html.


Simplement utiliser

yourContainer.innerHTML = JSON.stringify(lineChartData);

Si vous voulez quelque chose de plus joli, faites

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

Demonstration

Mais si vous faites cela simplement pour déboguer, alors vous feriez mieux d' utiliser la console avec console.log(lineChartData) .


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 ne sais pas si cela est adaptable pour d'autres navigateurs.


document.getElementById('container').innerHTML = lineChartData[array_index]




object