How do I print a 2D array with fixed column widths in javascript?

Question

I have a Javascript array:

animals = [
  ["cats", "dogs"],
  ["verrylongcat", "dog"],
  ["shortcat", "verrylongdog"],
  ["cat", "dog"]
]

And I would like to display it nicely in the console. Is there an easy way to make the colums a fixed width so I get something like this:

cats            || dogs
verrylongcat    || dog
shortcat        || verrylongdog
cat             || dog

animals is just an example, my array could also have 3, or 4 columns or even more.

BTW - I'm shocked this question hasn't been asked, but I've looked everywhere and I can't find it. I'm basically asking the same question as this question but for JavaScript / JS.

Use for loops for each array. What have you tried so far?

polaris
– polaris

2018-05-01 13:58:14 +00:00
Commented May 1, 2018 at 13:58 — polaris
– polaris, Commented May 1, 2018 at 13:58

Ori Drori · Accepted Answer · 2018-05-01 14:13:23Z

3

If you're just looking for the table look in the console, you can use console.table().

Node.js support:

v10 - native console.table
before v10 - use the console.table npm module

Demo:

const animals = [
  ["cats", "dogs"],
  ["verrylongcat", "dog"],
  ["shortcat", "verrylongdog"],
  ["cat", "dog"]
];

console.table(animals); // look in the browser's console

To create a table on an HTML page, use nested Array.map() with template literals and Array.join() to create the rows for a table. Use Element.innerHTML to assign it to the table's body:

const animals = [
  ["cats", "dogs"],
  ["verrylongcat", "dog"],
  ["shortcat", "verrylongdog"],
  ["cat", "dog"]
];

const rows = animals.map((r) => `
  <tr>
    ${r.map((c) => `<td>${c}</td>`).join('')}
  </tr>
`).join('');

target.innerHTML = rows;

td {
  padding: 0.2em 0.5em;
}

td:nth-child(2) {
  border-left: 3px double;
}

<table>
  <tbody id="target"></tbody>
</table>

edited May 1, 2018 at 14:13

answered May 1, 2018 at 14:00

Ori Drori

196k32 gold badges243 silver badges233 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ryan Shillington Over a year ago

Sorry, I should have mentioned that I wanted it for debug in the console, but this is a good answer none the less.

Ryan Shillington Over a year ago

Very nice! I can't believe how long I've been using JavaScript and i didn't know about console.table()

Ryan Shillington Over a year ago

Boo! console.table doesn't work in NodeJS (at least in v8). Do you have a trick for that too?

Flavio Giobergia · Accepted Answer · 2018-05-01 14:20:04Z

First you're going to need to define the maximum width of the first column: to get there, you need to iterate over the array and save the maximum length of the first element (the proposed solution uses reduce() to do this)

Then, you can iterate over the array once again and print each row with the right amount of padding (the proposed solution uses map() to do this, along with the repeat() method to reproduce the space character the desired number of times.

const animals = [
  ["cats", "dogs"],
  ["verrylongcat", "dog"],
  ["shortcat", "verrylongdog"],
  ["cat", "dog"]
];

const maxLength = animals.reduce((currMax,el) => el[0].length > currMax ? el[0].length : currMax, 0) + 5;
animals.map(el => console.log(el[0] + " ".repeat(maxLength - el[0].length) + "|| " + el[1]));

EDIT: if the number of columns is > 2, then maxLength can be turned into an array of maximum lengths populated similarly to what has already been shown (i.e. by reducing the initial matrix). Then, the mapping needs to be updated so as to apply the spacing between columns accordingly.

Ryan Shillington · Accepted Answer · 2018-05-01 15:19:22Z

0

If you're just looking to log it to the console in NodeJS (which doesn't natively support console.table(animals) unless you're on v10.0+), do something like:

const animals = [
  ["cats", "dogs"],
  ["verrylongcat", "dog"],
  ["shortcat", "verrylongdog"],
  ["cat", "dog"]
];

for (const animal of animals) {
    console.log(animal.map(data => data.padEnd(20)).join(" || "));
}

If you find that your data actually looks like this, then print it out using the code below:

const animals = [
  {
    name: "dog",
    tail: true
  },
  {
    name: "cat",
    tail: true
  }];

console.log(Object.keys(animals[0]).map(data => data.padEnd(20)).join(" || "));
for (const animal of animals) {
  console.log(Object.values(animal).map(data => data.toString().padEnd(20)).join(" || "));
}

edited May 1, 2018 at 15:19

answered May 1, 2018 at 14:03

Ryan Shillington

25.5k17 gold badges103 silver badges125 bronze badges

Collectives™ on Stack Overflow

How do I print a 2D array with fixed column widths in javascript?

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related