Logging Pretty-Printing Tabular Data to the Console

Share this video with your friends

Social Share Links

Send Tweet
Published 8 years ago
Updated 5 years ago

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.

[00:00] 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.

[00:15] 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.

[00:50] 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.

[01:19] 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 01, and 2, and then, with all the properties of the objects in the array.

[01:46] 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.

[02:25] You can see, when you've got an object well-defined fields here, that the index, instead of being 01, 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.

[02:48] 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.

Hunter
Hunter
~ 8 years ago

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.

Ferenc
Ferenc
~ 8 years ago

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

Raphi
Raphi
~ 8 years ago

This was a really nice mini course

Eric
Eric
~ 8 years ago

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

Jonathan
Jonathan
~ 8 years ago

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.

Angelo
Angelo
~ 8 years ago

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?

James Coury
James Coury
~ 7 years ago

Thanks for the course! :)

Mike
Mike
~ 7 years ago

Really nice course. I enjoyed all the simple to understand examples.

DATA_DEER
DATA_DEER
~ 7 years ago

##love it!

Matt
Matt
~ 7 years ago

This whole course was dope!

Chris Lamb
Chris Lamb
~ 6 years ago

Amazing course.

Victor Hazbun
Victor Hazbun
~ 6 years ago

I love quick courses like this one!

HuanCheng Bai
HuanCheng Bai
~ 6 years ago

Wow. love the console.table!!!

Laureline Paris
Laureline Paris
~ 3 years ago

Hi there, Thanks for sharing & tips :) However it is unfortunate to not cover console.dir or console.dirxml in this advanced Advanced Logging with the JavaScript Console course though.

Markdown supported.
Become a member to join the discussionEnroll Today