Mapping array data to a web page with vanillaJS

Starting out with ReactJS as a beginner, the common project or frequent task that one would get to work on or practice, is the fetching of data/information from a particular API endpoint, say for example jsonplaceholder API, where you can decide to fetch the list of dummy user profiles or make a todo app by making either a POST or GET request.

In this short guide, I'd show you how you can accomplish that, using vanilla javascript, but this time I'd be doing that by creating an array of user data locally on my PC, so there wouldn't be any need to fetch from an API.

So... Let's get started.

In React, this task is quite straightforward and simple due to the advent of JSX, the ability for you to be able to mix up HTML markup and JavaScript logic in a single file.

But that isn't the case with vanillaJs, one would have to consider a way to manipulate the DOM(Document Object Model) so as to be able to render or display the data onto the UI of the application/webpage.

You'd start by creating two files, index.html and index.js.

Creating the array of user data.

Since you'd be making use of dummy datasets, let's start by creating them inside index.js. We usually want a typical user profile to contain the name of the user, their home address, office address, email account, an image showing their face, etcetera. An array of objects would suffice for this type of use case, where we'd be having multiple objects that contain the user's information.

const users = [
 {
    name: "Jayski Oje",
    office_address: "24, Wall street",
    home_address: "365 Bridges road",
    email: "user@example.com",
    avatar: "path/to/profile-image"
  },
  {
    name: "Bing BoyTheo",
    office_address: "675, Ratatouille street",
    home_address: "54 Gates Estate",
    email: "user@example.com",
    avatar: "path/to/profile-image"
  }, 
  {
    name: "Ghost Sam",
 (σx+σy)2ΔxΔy 
unanswered
    office_address: "001, Silent street",
    home_address: "87 North-void Street",
    email: "user@example.com",
    avatar: "path/to/profile-image"
  }
];

Manipulating the DOM

Once you've created the array that holds the user data, you'd need to find a way to display this data in the DOM. Let's take a look at the HTML file below. The aim is to display the user's data in the container, you'd achieve that by targeting the "DOM node". If this is your first time hearing the term/word "DOM node", you can read about it here by creating a variable to hold it in place(or create a memory space/position for it)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mapping data</title>
</head>
<body>
  <div id="container" class="container">
    <!-- JavaScript is used to display the user profiles -->
  </div>
</body>
<script stc="index.js"></script>
</html>

Now, you'd have to head back into index.js to create the variable that would hold the value of the container DOM node. You can do that by typing...

let usersContainer = document.getElementById("container");

It is advisable to make use of the let statement when you're initializing the variable since it is still going to be reassigned to another value.

Displaying the mapped data

All that is needed to display the data in the DOM is the JavaScript map() function and making use of JavaScript's es6 string literal syntax to concatenate the strings in the HTML markup that is needed to display the data.

const mappedUsers = users.map((user, index) => {
  return `<div class="project-card" key=${index}>
                <img src=${user.avatar} alt="user profile image" />
                <div class="details">
                 <p>${user.name}</p>
                 <p>${user.home_address}</p>
                 <p>${user.office_address}</p>
               </div>
          </div>`;
});

Once you've successfully created the mappedUsers array, the only thing left is to reassign it to the usersContainer variable that was declared previously.

That can be achieved by setting the usersContainer inner HTML to be equal to the mappedUsers variable.

usersContainer.innerHTML = mappedUsers

And that's all.

Thank you for reading this article, kindly share it amongst your folks if it helped you in any way. Let me know of any other way this can be achieved with vanillaJS in the comment section.

Caleb's Blog