Meilleure visualisation des données de la console avec des tables

Nous discutons dans cet article de plusieurs manières de consigner des données dans la console dans un format de tableau visuellement lisible à l’aide de la méthode console.table ().

La visualisation des données est un élément essentiel de la technologie moderne. principes de développement Web de tous les jours, d'où la nécessité de trouver de meilleurs moyens de gérer et de consigner des données structurées dans la console du navigateur. Pour ce faire, montrons comment enregistrer des données sur la console dans un format tabulaire avec la méthode console.table () .

console.table ()

Cette méthode permet de consigner données à la console sous la forme de tables. Il faut un argument de données obligatoire qui peut être un tableau ou un objet, ainsi qu'un paramètre facultatif de colonnes . Si l'argument data est un tableau, il enregistre les données sous forme de tableau avec chaque élément du tableau sous forme de ligne dans le tableau.

La première colonne du tableau s'appelle (index ) . Si data est un tableau, alors ses valeurs seront les indices du tableau. Mais si data est un objet, ses valeurs seront les noms de propriété.

Journalisation des tableaux en tant que tableaux

Comme nous l'avons dit précédemment, lors de la journalisation de tableaux avec console.table () les éléments du tableau sont consignés sous forme de lignes et leurs valeurs seront les index du tableau. Prenons l'exemple ci-dessous:

 var  exampleArray  =   [
   "Premier élément du tableau" 
   "Je suis le deuxième élément de ce tableau" [19659011]
   "Il est évident que je suis le dernier élément" 
] ; 
console .  table  ( exampleArray ) ; 

Nous avons défini ici un exemple de tableau avec trois éléments et avons consigné le tableau avec la console . méthode table () . Si vous exécutez cet extrait, vous devriez obtenir le résultat suivant dans la console:

Comme nous l'avons dit, les éléments du tableau sont restitués dans la console sous forme de rangées de tableau, avec leurs positions respectives sous forme d'indices.

Journalisation d'un tableau de tableaux sous forme de tableaux

connecter un tableau de tableaux? Vous pouvez déjà commencer à imaginer la sortie. Si les éléments du tableau sont eux-mêmes des tableaux, leurs éléments sont énumérés dans la ligne, un par colonne. Arrêtons d'imaginer et commençons par le démontrer avec l'exemple ci-dessous:

 var  arrayOfArrays  =   [
 	 "[Phone"  "Samsung" ]  
  	 [ "Voiture"   "Ferrari" ]  
  	 [ "Sports"   "Football" ] 
] ; 
console .  table  ( arrayOfArrays ) 

Comme nous l'avons proposé, nous avons enregistré un tableau avec trois autres éléments de tableau comme enfants. Si nous exécutons cet extrait et extrayons la console, nous devrions avoir cette sortie:

Journalisation d'objets sous la forme de tableaux

Tout comme les tableaux, nous pouvons également enregistrer des objets avec la méthode console.table () console.table () mais restitue le contenu un peu différemment. Avec les objets, les valeurs des tableaux seront les noms de propriété des objets. l'exemple ci-dessous:

 function   Employee  ( prénom  nom  email )   {
   this  ].  firstName  =  firstName ; 
   ceci .  lastName  =  nom ; 
  ; 
   ce .  email  =  email
} 
 var  employee  =   new   Employee  ( "John"   "Smith"   ] "jsmith@test.com" ) ; 
console .  table  ( employé ) ; 

Ici, nous avons créé un nouvel objet employé à partir de notre fonction Employé et adopté à la douane. données pour les détails des employés, et finalement nous avons connecté le nouvel employé que nous avons créé à la console avec la méthode console.table () . Si nous exécutons l'extrait de code et vérifions la console, les détails de l'employé seront rendus sous forme de tableau, comme suit:

Tableau d'objets sous forme de tableau

Comme avec un tableau de tableaux, si les propriétés de l'objet sont elles-mêmes des objets, leurs propriétés sont énumérées dans la ligne, une par colonne. Prenez l'exemple suivant:

 function [19659052] Employé  ( prénom nom  prénom nom  courriel )   {
   ce .  de nom   prenom ; 
   ceci .  lastName  =  lastName ; 
   ceci .  email  =  ] email ; 
} 
 var  Peter  =   new   Employé  ( "Peter"   "Eze"   "peter@test.com" ) [19659011]; 
 var  Chris  =   Nouveau   Employé  "" Chris " " Nwamba " " chris@test.com ") ; 
 var  William  =   new   Employé  (" William "[19659029] "Imoh"   "william@test.com" ) ; 

console .  table  ( [ Peter  Chris  William ] ) ; 19659020] Sans exécuter cet extrait, vous pouvez déjà imaginer comment la méthode  console.table ()  organisera et restituera ces données dans la console. Encore une fois, si nous exécutons cet extrait et examinons la console, voici ce que nous aurons: 

 
 Comme prévu, les propriétés de l'objet sont énumérées dans les lignes du tableau, un objet par colonne avec les valeurs affichées dans chaque colonne. Cela ne semble pas assez complet avec la colonne d'index qui lit les valeurs numériques. si nous pouvons changer cela avec le tableau suivant? 
 Journalisation des objets imbriqués sous forme de tableaux 
 Ce scénario est un autre scénario qui nous permet de définir un contenu personnalisé dans la colonne d'index. objet dont les propriétés sont elles-mêmes des objets, en voici un exemple: 
 function   Employé  ( prénom  lastName  email  ])   {
   ce .  prénom  =  prénom ; 
   ce .  connexion tName  =  nom ; 
   ce .  email  =  email ; 
} 
 var  équipe  =   {} ; 
  équipe .  leader  =   nouveau   Employé  ( "Peter"   "Eze"   "peter @ test.com ") ; 
  team .  manager  =   new   Employé  ( "Chris"   "Nwamba"   "chris @ test.com ") ; 
  équipe .  writer  =   new   Employé  ( "William"   "Imoh"   "william @ test.com ") ; 
console .  table  ( team ) ; 

 Nous avons créé ici un nouvel objet team qui illustre un objet dont les propriétés sont des objets. Dans de tels cas, la méthode  console.table ()  étiquette correctement l'index avec les propriétés de l'objet imbriqué. Voici la sortie du journal:
 
 Rendu conditionnel
 Enfin, la  console.table ( ) La méthode  utilise un paramètre de colonne facultatif nous permettant d’autoriser / restreindre le rendu de certaines colonnes de notre tableau.Par exemple, dans notre dernier exemple, nous pouvons décider de ne restituer que la colonne  firstName  du tableau. Voici comment nous pouvons y arriver:
 function   Employee  ( prénom  lastName  email )   {
   ] this .  firstName  =  firstName ; 
   cette .  lastName  =  nom de famille ; 
   cette .  email  =  email ; 
} 
 var  team  =   {} ;  ]
  équipe .  leader  =   nouveau   Employé  ( "Peter"   "Eze"   "peter @ test.com ") ; 
  team .  manager  =   new   Employé  ( "Chris"   "Nwamba"   "chris @ test.com ") ; 
  équipe .  writer  =   new   Employé  ( "William"   "Imoh"   "william @ test.com ") ; 
        
console .  table  ( équipe   [ "prénom" ] ) ; 
 Ceci produira le sortie de la console suivante sur le navigateur:
 Conclusion
 Dans cet article, nous avons passé en revue les différentes manières de consigner des tableaux et des objets sous forme de tableaux dans la console du navigateur pour une meilleure visualisation des données. Si cet article n’est pas assez clair et que vous avez besoin de plus d’informations sur ce concept, consultez la documentation du  MDN .
 Pour plus d’informations sur la création de superbes applications Web
Vous voulez en savoir plus sur la création d'excellentes interfaces utilisateur? Découvrez  Kendo UI  - notre bibliothèque de composants d'interface utilisateur complète qui vous permet de créer rapidement des applications réactives de haute qualité. Il inclut tous les composants dont vous aurez besoin, des grilles et graphiques aux programmateurs et cadrans.