How can I populate a html select element with the contents of an array using vanilla javascript?

Question

I am creating a basic weather application.

I have created a simple modal that that consists of two <select> elements. One for city and the other for country.

<div class="modal">
  <select name="city" id="city"></select>
  <select name="country" id="country"></select>
</div>

Using vanilla JavaScript, I would like to populate these elements with values of arrays I have stored in other scripts.

export const countries = [
    { Code: "AF", Name: "Afghanistan" },
    { Code: "AX", Name: "\u00c5land Islands" },
    { Code: "AL", Name: "Albania" },
    { Code: "DZ", Name: "Algeria" },
    { Code: "AS", Name: "American Samoa" },
    { Code: "AD", Name: "Andorra" },
    { Code: "AO", Name: "Angola" },
    { Code: "AI", Name: "Anguilla" },
    { Code: "AQ", Name: "Antarctica" },
    { Code: "AG", Name: "Antigua and Barbuda" },
    { Code: "AR", Name: "Argentina" }, //etc etc

export const cities = [
  {
    country: 'Andorra',
    geonameid: 3040051,
    name: 'les Escaldes',
    subcountry: 'Escaldes-Engordany',
  },
  {
    country: 'Andorra',
    geonameid: 3041563,
    name: 'Andorra la Vella',
    subcountry: 'Andorra la Vella',
  },
  {
    country: 'United Arab Emirates',
    geonameid: 290594,
    name: 'Umm al Qaywayn',
    subcountry: 'Umm al Qaywayn',
  }, //etc etc

Here is the script for my modal which is importing the cities and countries variables. This is what I have tried, however the select elements remain blank and no errors appear in the console. I have even tried logging the variables to the console but nothing appears. I also tried adding a click event listener to a button, it made no difference.

modal.js

import { cities } from "./cityData.js";
import { countries } from "./countryData.js";

const selectCity = document.getElementById('city')
const selectCountry = document.getElementById('country')

window.onload = function() {
  let cityOptions = cities.map(city => `<option value=${city.name.toLowerCase()}>${city.name}</option>`).join('\n');
  let countryOptions = countries.map(country => `<option value=${country.Code.toLowerCase()}>${country.Code}</option>`).join('\n')

  selectCity.innerHTML = cityOptions;
  selectCountry.innerHTML = countryOptions;
}

EDIT: Apologies, I should clarify that currently, the modal is not actually a modal right now, it is simply a static div in my html. It loads with the rest of the page.

Answer 1

Your approach is correct, you can see it working here.

Maybe your script is not executing, are you sure you are adding your JS to the HTML file?

 const countries = [ { Code: "AF", Name: "Afghanistan" }, { Code: "AX", Name: "Åland Islands" } ] const selectCountry = document.getElementById('country') window.onload = function() { let countryOptions = countries.map( country => `<option value=${country.Code.toLowerCase()}>${country.Code}</option>`).join('\n') selectCountry.innerHTML = countryOptions; }

 <div class="modal"> <select name="country" id="country"></select> </div>