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

Question

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

(URL: 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 函数：基本上它从输入中获取值并查找包含您在输入中键入的内容的选项。如果清除输入，函数 returns 所有课程。

Answer 2

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

这仅适用于 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>

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

Creating a Dropdown list by fetching data from backend

javascript

fetch-api