arrays parcourir - Comment imprimer un tableau d'objets en JavaScript?




dimensions html (9)

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

Answers

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

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


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.


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

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

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


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


Si vous utilisez Chrome, vous pouvez également utiliser

console.log( yourArray );


L'homme de paille

J'ai besoin de savoir combien de fois un bouton a été cliqué et de faire quelque chose à chaque troisième clic ...

Solution assez évidente

// Declare counter outside event handler's scope
var counter = 0;
var element = document.getElementById('button');

element.addEventListener("click", function() {
  // Increment outside counter
  counter++;

  if (counter === 3) {
    // Do something every third time
    console.log("Third time's the charm!");

    // Reset counter
    counter = 0;
  }
});
<button id="button">Click Me!</button>

Maintenant, cela fonctionnera, mais cela empiétera sur la portée externe en ajoutant une variable, dont le seul but est de garder une trace du nombre. Dans certains cas, cela serait préférable, car votre application externe pourrait avoir besoin d'accéder à ces informations. Mais dans ce cas, nous ne modifions que le comportement de chaque troisième clic. Il est donc préférable de placer cette fonctionnalité dans le gestionnaire d'événements .

Considérez cette option

var element = document.getElementById('button');

element.addEventListener("click", (function() {
  // init the count to 0
  var count = 0;

  return function(e) { // <- This function becomes the click handler
    count++; //    and will retain access to the above `count`

    if (count === 3) {
      // Do something every third time
      console.log("Third time's the charm!");

      //Reset counter
      count = 0;
    }
  };
})());
<button id="button">Click Me!</button>

Notez quelques petites choses ici.

Dans l'exemple ci-dessus, j'utilise le comportement de fermeture de JavaScript. Ce comportement permet à n'importe quelle fonction d'avoir accès à la portée dans laquelle elle a été créée, indéfiniment. Pour pratiquement l'appliquer, j'appelle immédiatement une fonction qui renvoie une autre fonction et, comme la fonction que je retourne a accès à la variable de comptage interne (en raison du comportement de fermeture expliqué ci-dessus), il en résulte une portée privée pour l'utilisation par le résultat. fonction ... Pas si simple? Diluons-le ...

Une simple fermeture d'une ligne

//          _______________________Immediately invoked______________________
//         |                                                                |
//         |        Scope retained for use      ___Returned as the____      |
//         |       only by returned function   |    value of func     |     |
//         |             |            |        |                      |     |
//         v             v            v        v                      v     v
var func = (function() { var a = 'val'; return function() { alert(a); }; })();

Toutes les variables en dehors de la fonction renvoyée sont disponibles pour la fonction renvoyée, mais elles ne le sont pas directement pour l'objet fonction renvoyé ...

func();  // Alerts "val"
func.a;  // Undefined

Trouver? Ainsi, dans notre exemple principal, la variable count est contenue dans la fermeture et toujours disponible pour le gestionnaire d'événements. Il conserve donc son état d'un clic à l'autre.

De plus, cet état de variable privée est entièrement accessible, à la fois pour les lectures et pour l'affectation à ses variables privées.

Voilà; vous intégrez maintenant pleinement ce comportement.

Article de blog complet (y compris les considérations relatives à jQuery)





javascript arrays object