When we build user interfaces we often take data and render 🧶 🧶 render rendering is the process of building an interface from some code it in the user interface. We will model some real-life objects using a data structure. However, end users don’t directly interact with a data structure. Instead, they’ll interact with a rendering of this data structure through some user interface, typically a web browser. We’re going to start with a data structure and explore how we can render it on the page.

Suppose you’re building a user interface to display the films that are now showing on a film website. We need to render some cinema listings in the user interface. Let’s define an acceptance criterion:

Given a list of film data
When the page first loads
Then it should display the list of films now showing, including the film title, times and film certificate

We can use a wireframe 🧶 🧶 wireframe A wireframe is a basic outline of a web page used for design purposes to visualise how the user interface should look:

Cinema listings wireframe 🖼️

The wireframe is built by reusing the same UI component 🧶 🧶 UI component A UI component is a reusable, self-contained piece of the UI. UI components are like lego blocks you can use to build websites. Most websites are made by “composing” components in this way. . In particular, each film object is rendered as a card component. To build this user interface, we will start with data in the form of an array of objects, each with similar properties. Here are some example film data:

Interactive code block

const films = [
  {
    title: "Killing of Flower Moon",
    director: "Martin Scoresee"
    times: ["15:35"],
    certificate: "15",
    duration: 112
  },
  {
    title: "Typist Artist Pirate King",
    directory: "Carol Morley"
    times: ["15:00", "20:00"],
    certificate: "12A",
    duration: 108
  },
  .
  .
  .
];

Our task will be to build the film listings view from this list of data.

🎯 Sub-goal: Build a film card component

To break down this problem, we’ll render a single datum, before doing this for the whole list. Here’s one film:

Interactive code block

const film = {
    title: "Killing of Flower Moon",
    director: "Martin Scoresese"
    times: ["15:35"],
    certificate: "15",
    duration: 112
};

Starting with this object, we’ll focus only on building this section of the user interface:

We can start by calling createElement to create and compose DOM elements 🧶 🧶 compose DOM elements To compose DOM elements means to combine DOM elements to form some part of the user interface. . For now, we’ll only consider rendering the title property from the film object:

Interactive code block

const film = {
    title: "Killing of Flower Moon",
    director: "Martin Scoresese"
    times: ["15:35"],
    certificate: "15",
    duration: 112
};

const filmCard = document.createElement("section");
filmCard.innerHTML = `
  <h3>${film.title}</h3>
`;
console.log(filmCard);

If we open up the console tab, we should be able to see this element logged in the console. However, it won’t yet appear in the browser.

Appending elements

To display the film card, we need to append it to another element that is already in the DOM tree.

Interactive code block

const film = {
    title: "Killing of Flower Moon",
    director: "Martin Scoresese"
    times: ["15:35"],
    certificate: "15",
    duration: 112
};

const filmCard = document.createElement("section");
filmCard.innerHTML = `
<p>${film.title}</p>
`;

document.querySelector("ul").append(section);

Recall our sub-goal:

🎯 Sub-goal: Build a film card component

We can render any film object in the user interface with a general component. We’ve composed DOM elements to create a card; now we will build a reusable component. To do this, we wrap up our code inside a JavaScript function. JavaScript functions reuse code: so we can implement reusable UI components using functions.

Look at our code so far:

Interactive code block

const film = {
    title: "Killing of Flower Moon",
    director: "Martin Scoresese"
    times: ["15:35"],
    certificate: "15",
    duration: 112
};

const filmCard = document.createElement("section");
filmCard.innerHTML = `
<p>${film.title}</p>
`;
console.log(filmCard);

We can wrap up some of this code to create our reusable film card component:

Interactive code block

function createFilmCard(film) {
  const card = document.createElement("section");
  card.innerHTML = `
    <p>${film.title}</p>
`;
  return card;
}

const film1 = {
    title: "Killing of Flower Moon",
    director: "Martin Scorsese"
    times: ["15:35"],
    certificate: "15",
    duration: 112
};

const film2 = {
    title: "Typist Artist Pirate King",
    director: "Carol Morley"
    times: ["15:00", "20:00"],
    certificate: "12A",
    duration: 108
};

document
  .querySelector("ul")
  .append(createFilmCard(film1),createFilmCard(film2)); // append the film cards to the DOM

We can now render any film data object in the UI. However, to fully solve this problem we must render a list of data. For each film object, we need to render a corresponding film object in the UI. In this case, there is a one-to-one mapping 🧶 🧶 one-to-one mapping A one-to-one mapping associates every element in a set to exactly one element in another set between the data array and the UI components on the web page. Each item in the array matches a node in the UI. We can represent this diagrammatically by pairing up the data elements with their corresponding UI components:

To create an array of card components, we can iterate through the film data using a for...of loop:

Interactive code block

const films = [
  {
    title: "Killing of Flower Moon",
    director: "Martin Scoresee"
    times: ["15:35"],
    certificate: "15",
    duration: 112
  },
  {
    title: "Typist Artist Pirate King",
    directory: "Carol Morley"
    times: ["15:00", "20:00"],
    certificate: "12A",
    duration: 108
  },
];

const filmCards = [];
for (const item of films) {
  filmCards.push(createFilmCard(item));
}

document.querySelector("ul").append(...elements);
// invoke append using the spread operator

However, there are alternative methods for building this array of UI components.

For every item in a starting array, we want to apply a function to each element in the starting array to create a new array. Earlier, we used a for...of statement to apply the function createFilmCard to each element in the array. However, we can also build an array like this using the map array method. map is a higher order function 🧶 🧶 higher order function A higher-order function is a function that takes another function as an argument or returns a new function . In this case, it means we pass a function as an argument to map. Then map will use this function to create a new array.

Let’s work through an example:

Interactive code block

const arr = [5, 20, 30];

function double(num) {
  return num * 2;
}

Our goal is to create a new array of doubled numbers given this array and function. We want to create the array [10, 40, 60]. Look, it’s another “one to one mapping”

We are building a new array by applying each item to double. Each time we call double we store its return value in a new array:

Interactive code block

function double(num) {
  return num * 2;
}

const arr = [5, 20, 30];
const doubledNums = [double(5), double(20), double(30)];

But we want to generalise this. Whenever we are writing out the same thing repeatedly in code, we probably want to make a general rule instead.
We can do this by calling map:

Interactive code block

function double(num) {
  return num * 2;
}

const arr = [5, 20, 30];
const doubledNums = arr.map(double);

const films = [
  {
    title: "Killing of Flower Moon",
    director: "Martin Scorsese"
    times: ["15:35"],
    certificate: "15",
    duration: 112
  },
  {
    title: "Typist Artist Pirate King",
    director: "Carol Morley"
    times: ["15:00", "20:00"],
    certificate: "12A",
    duration: 108
  },
];