web-dev-qa-db-fra.com

console.log montrant le contenu de l'objet tableau

J'ai essayé d'utiliser console.log Pour pouvoir voir le contenu de mon tableau contenant plusieurs objets. Cependant, j'obtiens une erreur en disant que console.log N'est pas un objet, etc. J'utilise jquery 1.6.2 et mon tableau ressemble à ceci:

filters = {dvals:[{'brand':'1', 'count':'1'},
                  {'brand':'2', 'count':'2'}, 
                  {'brand':'3', 'count':'3'}]}

console.log(filters);

Ce que je veux faire, c'est écrire le contenu de array(filters) dans une boîte d'alerte (c'est ce que je pensais que console.log Avait) dans le format des filtres. Comment je fais ça?

javascriptarraysalert
40
ONYX

console.log ne produit aucune boîte de message. Je ne pense pas qu'il soit disponible dans aucune version de IE (ni Firefox) sans l'ajout de firebug ou d'un équivalent.

Il est toutefois disponible dans Safari et Chrome. Puisque vous mentionnez Chrome, je vais utiliser cela pour mon exemple.

Vous devrez ouvrir votre fenêtre et son homologue de fenêtre de développeur. vous pouvez le faire en cliquant avec le bouton droit de la souris sur un élément de la page et en sélectionnant "Inspecter un élément". votre fenêtre sera divisée en deux parties, la partie développeur étant la partie inférieure. dans la division entre les deux parties est une barre avec des boutons et le bouton le plus à droite est étiqueté "console". Vous devrez cliquer dessus pour passer à l'onglet Console. Malheureusement, je ne sais pas comment y aller avec un clavier en chrome. (Dans Safari sur Mac OS X, il s'agit de la commande + shift + I)

Une fois là-bas, vous pourrez interagir avec la page chargée par le biais de javascript depuis la console et les messages que vous console.log sera affiché ici.

7
Kris

il existe deux solutions simples possibles pour vider un tableau sous forme de chaîne. En fonction de l'environnement que vous utilisez:

… Avec les navigateurs modernes, utilisez JSON:

JSON.stringify(filters);
// returns this
"{"dvals":[{"brand":"1","count":"1"},{"brand":"2","count":"2"},{"brand":"3","count":"3"}]}"

… Avec quelque chose comme node.js, vous pouvez utiliser console.info ()

console.info(filters);
// will output:
{ dvals: 
[ { brand: '1', count: '1' },
  { brand: '2', count: '2' },
  { brand: '3', count: '3' } ] }

Edit:

JSON.stringify est livré avec deux paramètres supplémentaires facultatifs. Le troisième paramètre "espaces" permet une jolie impression:

JSON.stringify(
                obj,      // the object to stringify
                replacer, // a function or array transforming the result
                spaces    // prettyprint indentation spaces
              )

exemple:

JSON.stringify(filters, null, "  ");
// returns this
"{
 "dvals": [
  {
   "brand": "1",
   "count": "1"
  },
  {
   "brand": "2",
   "count": "2"
  },
  {
   "brand": "3",
   "count": "3"
  }
 ]
}"
50
auco

L'objet console est disponible dans Internet Explorer 8 ou plus récent, mais uniquement si vous ouvrez la fenêtre Outils de développement en appuyant sur F12 ou via le menu.

Il reste disponible même si vous fermez à nouveau la fenêtre Outils de développement jusqu'à ce que vous fermiez votre IE.

Chorme et Opera ont toujours un console disponible, au moins dans les versions actuelles. Firefox utilise un console lors de l'utilisation de Firebug, mais il peut aussi en fournir un sans Pyromane.

Dans tous les cas, il est préférable de rendre l'utilisation de console optionnelle. Voici quelques exemples sur la façon de le faire:

if (console) {
    console.log('Hello World!');
}

if (console) console.debug('value of someVar: ' + someVar);
4
suknic

Il est simple d'imprimer un objet sur une console en Javascript. Utilisez simplement la syntaxe suivante:

console.log( object );

ou

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

Une méthode relativement inconnue suit qui affiche un objet ou un tableau sur la console sous forme de table:

console.table (objet);

Je pense qu'il est important de dire que ce type d'instruction de journalisation ne fonctionne que dans un environnement de navigateur. Je l'ai utilisé avec Google Chrome. Vous pouvez regarder la sortie de vos appels console.log dans la console développeur: Ouvrez-la en cliquant avec le bouton droit de la souris sur un élément de la page Web et en sélectionnant "Inspecter". Sélectionnez l'onglet 'Console'.

4
Torsten Barthel

Je recommande chaudement cet extrait pour m'assurer que les fragments de code laissés accidentellement n'échouent pas sur les navigateurs des clients:

/* neutralize absence of firebug */
if ((typeof console) !== 'object' || (typeof console.info) !== 'function') {
    window.console = {};
    window.console.info = window.console.log = window.console.warn = function(msg) {};
    window.console.trace = window.console.error = window.console.assert = function(msg) {};
}

plutôt que de définir une fonction vide, cet extrait est également un bon point de départ pour faire rouler votre propre substitut de console si nécessaire, c'est-à-dire vider ces informations dans un conteneur .debug, afficher des alertes (pourrait en recevoir beaucoup) ou autre ...

Si vous utilisez firefox + firebug, console.dir() est préférable pour la sortie du tableau, voir ici .

1
Frank Nocke

Json signifie JavaScript Object Notation. En réalité, tous les objets json sont des objets javascript, votre tableau est donc déjà sous forme json. Pour l'écrire dans une division, vous pourriez faire un tas de choses, l'une des plus faciles que je pense serait:

 objectDiv.innerHTML = filter;

où objectDiv est la div que vous voulez sélectionner dans le DOM en utilisant jquery. Si vous voulez lister des parties du tableau, vous pouvez y accéder puisqu'il s'agit d'un objet javascript comme suit:

 objectDiv.innerHTML = filter.dvals.valueToDisplay; //brand or count depending.

edit: tout ce que vous voulez être une chaîne mais qui n'est pas actuellement (ce qui est rare, javascript traite presque tout comme une chaîne), utilisez simplement la fonction toString() intégrée. Ainsi, la ligne ci-dessus si vous en aviez besoin serait filter.dvals.valueToDisplay.toString();

deuxième modification à préciser: cette réponse répond aux commentaires du PO et pas complètement à sa question initiale.

1
Ryan

On dirait que Firebug ou le débogueur que vous utilisez n'est pas initialisé correctement. Êtes-vous sûr que Firebug est complètement initialisé lorsque vous essayez d'accéder à la méthode console.log ()? Vérifiez l’onglet Console (s’il est activé).

Une autre possibilité pourrait être que vous écrasiez vous-même l'objet console n'importe où dans le code.

1
Neq