console.table

Otra de las opciones de la que nos podemos aprovechar los desarrolladores cuando trabajamos con Chrome es el método console.table. Gracias a él podemos crear tablas en la consola de desarrollo con las propiedades de nuestros arrays de objetos.

console.table([{ name: 'Gisela', lastname: 'Torres' }, { name: 'Jesús', lastname: 'Torres' }, {aa: 'bb'}])

En este caso pasamos a console.table un array con tres objetos: dos de ellos tienen las mismas propiedades y un tercero sólo una propiedad distinta a las que contienen los otros dos. El resultado por consola es el que sigue:

console.table basic

Como se puede apreciar, se crea una primera columna que contiene el índice del registro, name, lastname y aa que corresponden al nombre de las propiedades que tienen los objetos dentro del array. Aquellos elementos que no contenga alguna de las propiedades aparecerá como undefined dentro de esa columna.

Otro caso que puede ser interesante es cuando tenemos un array de objetos, bien recibidos a través de JSON o generados por nuestro cliente:

            function Profile(socialNetwork, alias) {
                this.socialNetwork = socialNetwork;
                this.alias = alias;
            }

            var profiles = {
                Twitter: new Profile('Twitter', '@0GiS0'),
                Facebook: new Profile('Facebook', 'returngis'),
                Blog: new Profile('Blog', 'returngis.net'),
                Linkedin: new Profile('Linkedin', 'giselatorresbuitrago'),
                GooglePlus: new Profile('Google Plus', '+GiselaTorres')
            };

            console.table(profiles, ["alias", "socialNetwork"]);

En este segundo ejemplo, se hace uso, además, de un segundo parámetro opcional donde indicamos las columnas y el orden en el que queremos que se muestren en la tabla. Este parámetro es perfecto para poder elegir sólo aquellas propiedades que necesitamos visualizar, sobretodo si nuestro objeto tiene un número considerable.

console.table with objetcs and columns

Espero que haya sido de utilidad 🙂

¡Saludos!