How to display a JavaScript array in HTML

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.