Use data to populate the DOM

Here is a rolodex with people's names and addresses:

Rolodex

We would like to run a function that will populate our page with names and addresses from an array of objects

Set Up

Set up HTML:

add html boilerplate
add jQuery script src
add app.js script src
add main.css with a link, rel is stylesheet
add a div with a class container

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" charset="utf-8"></script>
        <script src="app.js" charset="utf-8"></script>
        <link rel="stylesheet" href="main.css">
    </head>
    <body>
      <div class="container">

      </div>
    </body>
</html>

Data

Add the array of objects

app.js

/** @typedef { {name: string, address: string} } Contact */
/** @type{ Contact[] } */
const contacts = [
  { name: "Megatron", address: "Cybertron" },
  { name: "Some guy", address: "Some street" },
  { name: "Grace Hopper", address: "Arlington, Virginia" },
  { name: "Ching Shih", address: "The High Seas" },
  { name: "Slimer", address: "The Library" },
  { name: "Umbra", address: "The Void" },
  { name: "Hypatia", address: "The Neoplatonic school at Alexandria" },
  { name: "Matt Huntington", address: "Remote" },
  { name: "Ronald McDonald", address: "Casa del McDonalds" },
  { name: "Jem", address: "Starlight Music" }
];

What we want to do is populate our page with data from the array. If, in the future, we change the data in the array, the page can be re-populated.

Write a loop that iterates over the array

for (let contact of contacts) {
 console.log(contact)
}

We will now be interacting with the DOM so wrap the code in jQuery's DOM on-load function.
Create a container(table, with a header) that will house each name and address. Give it a class we can adjust later

const buildTable = () => {
  const $infoTable = $("<table>").addClass("info-table");
  $infoTable.html(
    `<thead>
      <tr>
        <th>Name</th>
        <th>Location</th>
      </tr>
    </thead>`
  );

  for (let contact of contacts) {
    console.log(contact);
  }
};

$(() => {
  buildTable();
});

Add in the table row and name cell, whose text comes from the array. Give it a class we can adjust later.

const $infoRow = $("<tr>");
const $nameCell = $("<td>").addClass("name").text(contact.name);

And the address cell, whose text comes from the array. Give it a class we can adjust later.

const $addressCell = $("<td>").addClass("address").text(contact.address); 

Append the cells to the row
Append the rows to the table

$infoRow.append($nameCell, $addressCell)
$infoTable.append($infoRow)

Outside of the for loop (why?):

$("body").append($infoTable);

Append the table to the body

Finished result

$(() => {
  const buildTable = () => {
    const $infoTable = $("<table>").addClass("info-table");
    $infoTable.html(
      `<thead>
        <tr>
          <th>Name</th>
          <th>Location</th>
        </tr>
      </thead>`
    );

    for (let contact of contacts) {
      console.log(contact);
      const $infoRow = $("<tr>");
      const $nameCell = $("<td>").addClass("name").text(contact.name);
      const $addressCell = $("<td>").addClass("address").text(contact.address);
      $infoRow.append($nameCell, $addressCell);
      $infoTable.append($infoRow);
    }
    $("body").append($infoTable);
  };
});

CSS

Give the info container some color, border, margin, padding

@import url('https://fonts.googleapis.com/css?family=Poppins:400,700');


/***********************************
* GENERAL
************************************/
body {
  font-family: 'Poppins', sans-serif;
}

/***********************************
* TABLE
************************************/
.info-table {
  background-color: oldlace;
  margin: 1em auto;
  width: 70%;
  border-spacing: 0;
}

tr {
  border-bottom: 2px solid grey;
}
td, th {
  border-bottom: 1px solid grey;
  padding: .5em;
}

th {
  font-size: 1.5em;
  background: moccasin;
}

tr:nth-child(even) {
  background: papayawhip;
}

tr:hover {
  background: blanchedalmond;
  color: steelblue;
}

.address {
  text-align: center;
}

Adding data

Write a function that will push new data in to the array.
The function should take name and address as parameters
The function should then run the 'buildTable()' function

/** @type { ( number: string, address: string ) => void } */
const addData = (name, address) => {
  data.push({ name: name, address: address });
  buildTable();
};

$(() => {
  buildTable();
  addData("Karolin", "NY");
});

The function 'doubles' the information. To fix this, we should clear out the old information before it populates. $('body').empty()

/** @type { ( number: string, address: string ) => void } */
const addData = (name, address) => {
  contacts.push({ name: name, address: address });
  $("body").empty();
  buildTable();
};

$(() => {
  buildTable();
  addData("Karolin", "NY");
});

Optional Activity

See if you can figure out how to create a removeData() function that takes a name of a person you want to remove, removes them from the data array, then refreshes the rolodex.

Basic Code

app.js II

/** @typedef { { name: string, address: string } } Contact */
/** @type { Contact[] } */
const contacts = [
  { name: "Megatron", address: "Cybertron" },
  { name: "Some guy", address: "Some street" },
  { name: "Grace Hopper", address: "Arlington, Virginia" },
  { name: "Ching Shih", address: "The High Seas" },
  { name: "Slimer", address: "The Library" },
  { name: "Umbra", address: "The Void" },
  { name: "Hypatia", address: "The Neoplatonic school at Alexandria" },
  { name: "Matt Huntington", address: "Remote" },
  { name: "Ronald McDonald", address: "Casa del McDonalds" },
  { name: "Jem", address: "Starlight Music" }
]

const buildTable = () => {
  const $infoTable = $("<table>").addClass("info-table");
  $infoTable.html(
    `<thead>
      <tr>
        <th>Name</th>
        <th>Location</th>
      </tr>
    </thead>`
  );
  for (let contact of contacts) {
    console.log(contact);

    const $infoRow = $("<tr>");
    const $nameCell = $("<td>").addClass("name").text(contact.name);
    const $addressCell = $("<td>").addClass("address").text(contact.address);
    $infoRow.append($nameCell, $addressCell);
    $infoTable.append($infoRow);
  }
  $("body").append($infoTable);
};

/** @type { ( number: string, address: string ) => void } */
const addData = (name, address) => {
  contacts.push({ name: name, address: address });
  $("body").empty();
  buildTable();
};

$(() => {
  buildTable();
  addData("Karolin", "NY");
});

Use data to populate the DOM

Set Up​

Data​

app.js​

CSS​

Adding data​

Optional Activity​

Basic Code​

app.js II​