从“选择”菜单中选择“选项”后获取 API 后显示项目

Question

我的HTML:

  <body>
    <form name="slectMovie">
      IMDb rating:
      <button type="submit" value="Select">Select</button>
    </form>
    <script src="script.js"></script>
  </body>

我的 JS：

const getData = async () => {
  try {
    const res = await fetch("http://134.209.87.8:1337/api/movies");
    const data = await res.json();
    console.log(data);
    const imdbSelect = document.createElement("select");
    document.querySelector("form").append(imdbSelect);

    if (data.data.length > 0) {
      const IMDbRating = [
        ...new Set(data.data.map((x) => x.attributes.IMDbRating)),
      ];

      IMDbRating.forEach((category) => {
        const option = document.createElement("option");
        option.textContent = category;
        imdbSelect.append(option);
      });
    }
  } catch (err) {
    console.log(err);
  }
};

getData();

我有一个 selection，即电影评级，我从创建的 API 中获取，并从 API 添加选项值。

我想知道如何在表单下方显示仅在 select 标签中 selected 的项目。

例如，如果我选择第一个选项，我想在表单下方显示仅符合该条件的项目，如果我选择其他选项以仅显示具有该选项条件的项目。

Answer 1

有很多方法可以实现这一点。以下是其中之一。

在 html 中，添加新行以显示项目。

<form name="slectMovie">
      IMDb rating:
      <button type="submit" value="Select">Select</button>
    </form>
    <ul id="theList"></ul>
<script src="script.js"></script>

在 javascript 中添加几行用于显示功能

let data = [];
      function dispplayData({ target }) {
        const selectedItem = data.data.filter(
          (d) => d.attributes.IMDbRating === Number(target.value)
        );
        const displayList = document.querySelector("#theList");
        displayList.innerHTML = "";
        selectedItem.forEach((item) => {
          let listItem = document.createElement("li");
          listItem.textContent = item.attributes.title;
          displayList.appendChild(listItem);
        });
        console.log(selectedItem);
      }

      const getData = async () => {
        try {
          const res = await fetch("http://134.209.87.8:1337/api/movies");
          data = await res.json();
          console.log(data);
          const imdbSelect = document.createElement("select");
          document.querySelector("form").append(imdbSelect);
          imdbSelect.addEventListener("change", dispplayData);

          if (data.data.length > 0) {
            const IMDbRating = [
              ...new Set(data.data.map((x) => x.attributes.IMDbRating)),
            ];

            IMDbRating.forEach((category) => {
              const option = document.createElement("option");
              option.textContent = category;
              imdbSelect.append(option);
            });
          }
        } catch (err) {
          console.log(err);
        }
      };

      getData();

希望对您有所帮助。

从“选择”菜单中选择“选项”后获取 API 后显示项目

Display items after fetching API after chosing Option from Selct menu

javascript

forms

api

compare

fetch