Mission 07 / Data-driven UI

Arrays to Tables

Use one array of objects as the data source for a semantic, responsive table.

Medium100 XPmap()join()Tables

Render pattern

Transform every object into one row

map() returns a new array of row strings. join("") combines them before the result is assigned to the table body.

tableBody.innerHTML = practiceMissions
  .map(function (mission) {
    return `<tr>...${mission.title}...</tr>`;
  })
  .join("");

Practice missions saved in this browser
Title	Difficulty	XP	Status

Checkpoint