通过从后端获取数据创建下拉列表

Question

我创建了一个课程容器，我想通过从后端获取选项来填充它们

（网址：https://ffcc-app.herokuapp.com/get/courses）

<div class="container">
        <form action="#" method="POST">
        <h2>Course 1</h2>
        <div class="select-box">
          <div class="options-container">
            <select class="option" id="one">
              <option value="">Select a course.. </option>
              
            </select>
          </div>
          <div class="selected">
            Select Courses
          </div>
          <div class="search-box">
            <input type="text" placeholder="Search..." />
          </div>
        </div>
        </form>
</div>        

此外，当我在搜索框中键入任何字符时，它应该过滤选项。 有人可以帮助我了解如何从 URL 获取数据以填充选项列表吗？

PS：我熟悉用于获取数据的 Fetch API

Answer 1

你可以这样做：

let result = {};
let allCourses = {};

function filterCourses() {
  var filter = document.getElementById("inputFilter").value;
  result.courses = allCourses.courses.filter(x => x.title.includes(filter))
  let select = document.getElementById("one");
  
  while (select.firstChild) {
        select.removeChild(select.firstChild);
  }
  
  for (let i = 0; i < result.courses.length; i++){
        let option = document.createElement("option");
        option.value = result.courses[i]._id;
        option.text = result.courses[i].title;
        select.appendChild(option);
    }
}

async function getCourses() {
    let url = 'users.json';
    try {
        let res = await fetch("https://ffcc-app.herokuapp.com/get/courses");
        return await res.json();
    } catch (error) {
        console.log(error);
    }
}

async function renderCourses() {
    allCourses = await getCourses();
    result = Object.assign({}, allCourses);
    let select = document.getElementById("one");
    for (let i = 0; i < result.courses.length; i++){
        let option = document.createElement("option");
        option.value = result.courses[i]._id;
        option.text = result.courses[i].title;
        select.appendChild(option);
    }
}

renderCourses()

<div class="container">
            <form action="#" method="POST">
            <h2>Course 1</h2>
            <div class="select-box">
              <div class="options-container">
                <select class="option" id="one">
                  <option value="">Select a course.. </option>
                  
                </select>
              </div>
              <div class="selected">
                Select Courses
              </div>
              <div class="search-box">
                <input type="text" id="inputFilter" placeholder="Search..." onchange="filterCourses()"/>
              </div>
            </div>
            </form>
    </div>  

说明：加载完所有课程后，我为每门课程设置了一个选项（_id 作为选项值，title 作为选项文本）。这是由函数renderCourses 制作的。

然后是filterCourses 函数：基本上它从输入中获取值并查找包含您在输入中键入的内容的选项。如果你清理输入，函数返回所有课程。

Answer 2

你必须获取你的 api，创建一个函数来操作你的 DOM，将数据传递给这个函数，以便它呈现 select 标签内的内容。

这只是为了选择标签。

const select = document.querySelector('.option')

fetch('https://ffcc-app.herokuapp.com/get/courses')
  .then(response => response.json())
  .then(data => {
    data.courses.forEach(course => render(course))
  });

function render(course) {
  const opt = document.createElement('option')
  opt.value = course.title
  const content = document.createTextNode(`${course.title}`)
  opt.appendChild(content)
  select.appendChild(opt)
}

<div class="container">
        <form action="#" method="POST">
        <h2>Course 1</h2>
        <div class="select-box">
          <div class="options-container">
            <select class="option" id="one">
              <option value="">Select a course.. </option>
              
            </select>
          </div>
          <div class="selected">
            Select Courses
          </div>
          <div class="search-box">
            <input type="text" placeholder="Search..." />
          </div>
        </div>
        </form>
</div>