CODEWITHSUNDEEP
javascriptbrowser
Vince
Vince

Reputation: 4232

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

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:

MDN Example

... 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.

Upvotes: 28

Views: 26257

Answers (3)

zoan
zoan

Reputation: 411

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]);

Upvotes: 38

user9189630
user9189630

Reputation: 9

Just open new tab and open your console and type console.table([['1','2','3']]); and run it and then try running your file and see if that works or not. but for me it worked!

Upvotes: -2

user7195025
user7195025

Reputation: 41

In theory console.table() prints tables (2 dimensions) not arrays (1 dimension) so the outer array is a list of rows (like <tr>s) and each inner array contains the values for each column for that row (like <td>s).

Upvotes: 1

Related Questions