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.