How to Display JavaScript Objects as HTML Elements

In this tutorial, you’ll learn how to display a list of JavaScript objects as a list of HTML elements on a web page.

Let’s say you have a list of JavaScript objects, and you need to output them as HTML elements in the web browser. In this example, we have a list of exercises, represented by a JavaScript object literal.

The JavaScript object literal:

let exerciseList = [
  {
    name: "Deadlift",
  },
  {
    name: "Push-up",
  },
  {
    name: "Pull-up",
  },
  {
    name: "Squat",
  },
];

The above is a JavaScript object literal array with four objects (exercises). We want to take those objects and display them as a list in the browser, like this:

• Deadlift
• Pull-up
• Push-up
• Squat

That’s an unordered list. If you inspect the list above in Chrome DevTools, the HTML markup for the list above will look like this:

<ul>
  <li>Deadlift</li>
  <li>Pull-up</li>
  <li>Push-up</li>
  <li>Squat</li>
</ul>

Displaying the JavaScript object literal array as HTML elements

We need to take care of the following four steps:

1. Create an empty unordered list element with HTML, so we can add our exercise list items inside it.
2. Find and grab hold of all the exercises from the JavaScript object literal array, by using a for loop.
3. Wrap each individual exercise object inside list item (<li></li>) tags.
4. Output the list item HTML elements in the browser inside the unordered list element (<ul></ul>) that we created in step 1.

1. Create an empty unordered list element

To set up an empty unordered list element in HTML, add the following inside your index.html (or your HTML window if you use something like CodePen):

<ul class="exercise-list"></ul>

Now let’s assign a reference to that unordered list to a variable, so we can add it to our unordered list later. Add the following code at the top of your script file:

let exerciseList = document.querySelector(".exercise-list");

2. Loop through exercise objects

Since we’re dealing with individual exercise objects inside an array, we need to loop (iterate) through each exercise before we can do something with them.

Add the following code right below your JS object:

for (let exercise of exerciseList) {
  console.log(exercise.name);
}

Your entire script file should look like this now:

let exerciseList = document.querySelector(".exercise-list");

let exerciseObjects = [
  {
    name: "Deadlift",
  },
  {
    name: "Push-up",
  },
  {
    name: "Pull-up",
  },
  {
    name: "Squat",
  },
];

for (exercise of exerciseObjects) {
  console.log(exercise.name);
}

Now check your browser console, and you should see this:

Now we have access to each individual exercise object.

3. Wrapping each exercise inside an HTML list item element

Now let’s wrap our collected exercise items inside the list item tag:

First, add the following variable right before your for loop begins:

let exerciseItems = "";

Now inside your loop, add this:

exerciseItems += "<li>" + exercise.name + "</li>";

Now if you console.log(exerciseItems) (outside and below your loop) your console will output each exercise item wrapped inside list item elements.

4. Add the exercise items inside the exercise list

Finally, to display our exercise items inside our exercise list element, add this code right below your for loop:

exerciseList.innerHTML = exerciseItems;

If you did everything correctly, your unordered exercise list should now display all exercises items inside your browser window.

Here’s all the code we wrote as a reference:

(function() {
  let exerciseList = document.querySelector(".exercise-list");

  let exerciseObjects = [
    {
      name: "Deadlift",
    },
    {
      name: "Push-up",
    },
    {
      name: "Pull-up",
    },
    {
      name: "Squat",
    },
  ];

  let exerciseItems = "";

  for (exercise of exerciseObjects) {
    exerciseItems += "<li>" + exercise.name + "</li>";
  }

  exerciseList.innerHTML = exerciseItems;
})();

Here’s a CodePen with all the working code.