From time to time, I see a search query that made it to my blog that piques my
interest and inspires a post. This is one such post.
How does one take an array (presumably in JavaScript) and display it in HTML?
Now in this day in age, I would most likely be approaching this problem with
a front-end library like React or Angular, or even PHP, depending on if it’s a
work thing, or a side project thing.
For simplicity’s sake, and the sheer fact that I have no idea how the person
that originally landed on my blog was approaching this, I’m going to use vanilla
JavaScript.
I’m also going to approach this a few different ways, based on a few different
assumptions.
The first approach, the most basic implementation I can think of, will be with
a flat array of values (no objects or nesting) and I’ll be displaying the data
as comma separated values:
const array = ['one', 'two', 'three', 'four', 'five'
document.write(array
Yeah, it’s really that simple if all you need to do is dump an array out,
without any additional formatting.
To take it a step further, let’s take that same array and display it as an
unordered list:
const array = ['one', 'two', 'three', 'four', 'five'
document.write(`<ul>${array.map((item) => `<li>${item}</li>`).join('')}</ul>`
Not much different, aside from needing to formally loop through the items and
assemble the HTML. The .join('') at the end if necessary to get around the
commas that get automatically injected when displaying an array.
To continue down the path of generating more complex HTML, I want to take things
a few steps forward by displaying an array of objects as a table:
const array = [
{ col1: 'one', col2: 111 },
{ col1: 'two', col2: 222 },
{ col1: 'three', col2: 333 },
{ col1: 'four', col2: 444 },
{ col1: 'five', col2: 555 },
document.write(`
<table border="1">
${array.map((row) => (`
<tr>
${Object.values(row).map((value) => (
`<td>${value}</td>`
)).join('')}
</tr>
`)).join('')}
</table>
`
This is great and all, but generally speaking, when displaying data in a tabular
format, we usually want to also have a heading. So to take things even further,
let’s take the first item’s object properties, and use them to generate a header
row for our table:
const array = [
{ col1: 'one', col2: 111 },
{ col1: 'two', col2: 222 },
{ col1: 'three', col2: 333 },
{ col1: 'four', col2: 444 },
{ col1: 'five', col2: 555 },
document.write(`
<table border="1">
<thead>
<tr>
${Object.keys(array[0]).map((column) => (`
<th>${column}</th>
`)).join('')}
</tr>
</thead>
<tbody>
${array.map((row) => (`
<tr>
${Object.values(row).map((value) => (
`<td>${value}</td>`
)).join('')}
</tr>
`)).join('')}
</tbody>
</table>
`
Obviously, there’s a hard assumption that every row has the same columns. Also,
you could very well approach this by using .forEach() and concatenating the
HTML to a variable before displaying it instead of the more React-like way that
I approached this.
While I’m unsure that this post will ever reach the person that originally
landed on my blog, it was still a blast to write and work through.
As we get further into our careers and deeper into the technology, we can lose
sight of how to do the simple things, or even just how to do the simple things
without the aid of our favorite frameworks, so it’s good to take a minute to
have fun with a trivial problem like this one.
