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

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 >
  <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.

CodePudding user response：

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: "\u00c5land 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 >
  <select name="country" id="country"></select>
</div>

CodePudding user response：

I figured it out. As I have been working with importing modules, I didn't think to add a new script tag for modal.js to the html.