This lesson is for PRO members.

Unlock this lesson NOW!
Already subscribed? sign in

Logging Pretty-Printing Tabular Data to the Console

3:09 JavaScript lesson by

Learn how to use console.table to render arrays and objects in a tabular format for easy scanning over the values. We'll create some mock data and then render it to the log in various ways to explore console.table's API.


egghead.io comment guidelines

Avatar
egghead.io

Learn how to use console.table to render arrays and objects in a tabular format for easy scanning over the values. We'll create some mock data and then render it to the log in various ways to explore console.table's API.

Avatar
Hunter

Very nice course; It looks like console.table is probably built using console.log("%csomething", magic css here); It would be wonderful to get a breakdown of how that's written, or if magic can be made to happen via the console.log css stuff, a demonstration would be cool.

Avatar
Ferenc

Another quick tip: i use a wrapper function log() which JSON.stringifies the output so it gives a prettyfied version that shows the structure at first glance

Avatar
Raphi

This was a really nice mini course

Avatar
Eric

Love it. I can't believe I didn't know this was a thing.

Avatar
Jonathan

Great course. I was really hoping, though, for a video on 'console.dir', which is sometimes handy for dissecting thrown Errors. I wonder what else it can be used for.

Avatar
ANGELO

Very useful way to show data. I think it's important to remember that this method is not yet standard and not available in all major browsers. Use Chrome to enjoy it.

Thank you for useful lessons at all. Any plans to talk about strategies to manage console in production environment?

Avatar
Hozefa

Looks like Chrome has dropped support for console.table

In reply to egghead.io
Avatar
Nabil

I've just tested it and it still works?

In reply to Hozefa
Avatar
James

Are you sure? I use it in Chrome all the time.

In reply to Hozefa
Avatar
James

Thanks for the course! :)

My favorite one of the console utility logging methods is the one that I actually didn't know about, until I started doing research to prepare for this course, and that is cosole.table. It works like this. Let's create a bunch of mock data first.

We're going to say function character, and it gets a name and a power. Then let's create a couple characters. Let's save VarBuffy equals new character. Her name is Buffy. Her power is that she's the slayer. VarWillow is a new character. Her name is Willow. Her power is that she's a witch. VarSpike is a new character, his name is Spike, and he's a vampire.

If we wanted to create a list of these characters, we could say VarChars equals Buffy, Willow, Spike. What if we wanted to log this out? We know that console.log takes any type of argument we want to throw at it, so we can do that, and we can see that we've got an array of three characters. We can open that up, we can open that up, and we can see there's that character, there's that character, there's that character.

That's great, but it's kind of a pain in the butt to have to step through and drill that down that deeply into what really is a pretty simple data set. Instead of using console.log, we can use console.table, and that's going to give us this beautifully rendered view that shows us every item in our array, with its index. Because it's an array, we get 0, 1, and 2, and then, with all the properties of the objects in the array.

We can take this a bit further though. Well, not with arrays, we can't. But, if we wanted to change characters, so that instead of being just an array, we wanted to make it an object. Let's do VarChars by Name. We can say Buffy is Buffy, Willow is Willow, and Spike is Spike. We can log out chars by Name, using console.table.

You can see, when you've got an object well-defined fields here, that the index, instead of being 0, 1, 2, like it is in an array, instead becomes the name for that item in that array. And, when you're logging out using console.table and object, you can specify a second argument here, which is the list of columns you'd want to show.

If I say only Power, then I get the index -- because you always get the index -- and I get the Power, and it removed the name. If I wanted to add Name here, then we go back to our original view. And, if I wanted to pass in an empty array, that's going to take out all of the fields, except for the index.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?