Step 4

Let's populate the corresponding drop-down selectors with "schools" and "terms" data.

Add the following to script.js

function populateSelector(selectElmId, data) {
  const select = document.getElementById(selectElmId);
  select.innerHTML = "";
  let item = null;
  for (let i = 0; i < data.length; i++) {
    item = document.createElement("option");
    item.value = data[i]["Name"];
    item.innerText = data[i]["Name"];
    select.appendChild(item);
  }
}

populateSelector("schools", schools);
populateSelector("terms", terms);

The populateSelector function gets a corresponding selector element (given using it id attribute) and populates its options based on the given data object. Note how for each "option" element, I've set both the value attribute and their inner text to the data Name property.

Save your files and check the webpage in your favorite browser. The drop down elements corresponding to "Choose a school" and "Choose a term" must now have the schools and terms data.