Why doesn't console.table() work for all objects/arrays?

Question

Why doesn't console.table() work for all objects / arrays?

With some data I get a nicely formatted table in the developer console. With other data I get nothing... not even an error message.

I just learned about console.table() while going through the challenges of #Javascript30. The presenter used console.table() for some of the output, but not all, and he didn't explain why. I tried to use it for all of the (array or object) output and saw why... it doesn't work.

Here's an example of one that doesn't work.

const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck' ];    const transportation = data.reduce((counters, item) => {    if (!counters[item]) counters[item] = 0;    counters[item]++;    return counters;  }, {});  console.log('transportation table');  console.table(transportation);    console.log('transportation log');  console.log(transportation);

<h1>Look at the console!</h1>

I expected console.table() to return something like this:

... except that the (index) column would contain car, truck, bike, etc. and the Values column would contain the count.

Update

Apparently console.table() doesn't work with SO's code snippets... which in this case means that it works exactly the same as it does on browsers :P So, I posted an example of the problem at CodePen: http://codepen.io/VAggrippino/pen/qRraEP

This was the 4th challenge, Array Cardio 1 for those of you following along.

I realize that this isn't strictly a programming / JavaScript question since the console is a feature of the browser, not the language or the DOM. I believe it's relevant because the browser is an essential tool that all web developers use and every major browser supports it.

Answer 1

I'm currently working on the same exercise for JS30 and encountered the same problem as you, which led me here.

I consulted the console.table() page on MDN, and after doing some testing it appears that this might be a Chrome issue.

From my limited testing, it seems like Chrome doesn't output a table for collections of primitive types (array of strings, single object), only collections of compound types (array of arrays/objects, object whose properties are objects).

This doesn't work:

console.table(['1','2','3']); 

But this does:

console.table([['1','2','3']]); 

I also tested on Canary, but had the same results.

However on Firefox, console.table() seems to work correctly. The MDN examples of collections of primitive types worked on Firefox, but not on Chrome.

To have an output on Chrome for your example, what you could do is put the transportation variable inside its own array, so that Chrome will print the table.

console.table([transportation]);