HTML Table from Array of Objects

Generate a Table of names from and Array of Objects.

by Amy Ruddy

HTML

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">

<div id="main">
  <div class="container py-5">
  <table class="table table-dark table-striped table-hover table-sm table-bordered border-info">
    <caption>Famous Actors and Actresses</caption>
    <thead>
      <tr>
        <th scope="col">First Name</th>
        <th scope="col">Last Name</th>
      </tr>
    </thead>
    <tbody>
      <!-- Placeholder for Table Data | Actors and Actresses -->
    </tbody>
  </table>
</div>
</div>

CSS

#main, html{
  background-color: #000;
}

JavaScript

let tbody = document.querySelector('tbody');

let fullNames = [
    {
        "firstName": "Amy",
        "lastName" : "Adams"
        },
    {
        "firstName": "Jeff",
        "lastName": "Bridges"
    }, {
        "firstName": "Melissa",
        "lastName": "McCarthy"
    },
    {
        "firstName": "Nicole",
        "lastName": "Kidman"
    },
    {
        "firstName": "Brad",
        "lastName": "Pitt"
    },
]

fullNames.forEach((name) => tbody.innerHTML += `<tr><td>${name.firstName}</td><td>${name.lastName}</td></tr>`);