将数据导入 HTML 文件中的脚本的最简单方法

Question

I have a script in my HTML file that I use to generate a drop-menu. Right now the contents of the drop-menu are hardcoded via an array I define within the script, like so:

  <script>
    let select = document.getElementById("selectJob");
    let options = ["Job 1", "Job 2", "Job 3", "Job 4", "Job 5"]; // Hard-coded array
    for (let i = 0; i < options.length; i++) {
      let opt = options[i];
      let a = document.createElement("a");
      a.textContent = opt;
      a.setAttribute('href', '#');
      a.addEventListener('click', () => {
        populateJobVal(opt)
      });
      a.setAttribute('class', 'btn btn-link');
      let li = document.createElement("li");
      li.appendChild(a);
      select.appendChild(li);
    }

    function populateJobVal(val) {
      document.getElementById("selection").value = val;
    }
  </script>

What I'd like to know is, what is the simplest way to import that data from an external file? If, for instance, I have an external JS file that returns an array, how do I import that in here and use it within my script in place of the hard-coded array?

Answer 1

Maybe with an Ajax call?

const response = await fetch('http://example.com/jobs.json');
const options = await response.json();
for (let i = 0; i < options.length; i++) {
// etc.

See https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch