無法使用獲取的數據根據輸入值進行搜索。 收到過濾器錯誤

Question

嘗試進行取決於輸入值的查詢。 我正在使用國家 rest 編程接口。 期望的產量是來自 API 的解析信息，該信息由把手標記模板化。 如果您澄清可以修復我的代碼的能力，那將是理想的。 非常感謝你。

import markupAdd from "../templates/markup.hbs";
const divInfo = document.querySelector("#main-container");
const search_input = document.querySelector(".input-field");
let search_term = "";
let countries;


const fetchCountries = () => {
  countries = fetch(
    "https://restcountries.eu/rest/v2/all?fields=name;flag;capital;population;languages"
  ).then((res) => res.json());
};

const showCountries = () => {
  divInfo.innerHTML = "";
  fetchCountries();
  countries
    .filter((country) =>
      country.name.toLowerCase().includes(search_term.toLowerCase())
    )
    .map((item) => markupAdd(item))
    .join("");
  divInfo.insertAdjacentHTML("beforeend", infoBlock);
};

search_input.addEventListener("input", (e) => {
  search_term = e.target.value;
  showCountries();
});

車把

<div id="country-container">
    <p class="country">{{name}}</p>
    <img src="{{flag}}" alt="{{name}}" width="600" height="400">
    <div id="info-container">
        <p class="capital">Capital: {{capital}}</p>
        <p class="population">Population: {{population}} </p>
        <ul class="langs">
            {{#each languages}}
            <li class="language">Languages: {{name}}</li>
            {{/each}}
        </ul>
    </div>
</div>

目前，輸入任何字母后，我收到這種錯誤

apiInfo.js?b765:22 Uncaught TypeError: countries.filter is not a function
    at showCountries (apiInfo.js?b765:22)
    at HTMLInputElement.eval (apiInfo.js?b765:28)

Answer 1

fetchCounries function 沒有返回任何東西，下面是解決問題的一種方法。

• 將 Function 轉換為async function
• 然后返回您將獲得的數據。

const fetchCountries = async () => {
  let countries = await fetch(
    "https://restcountries.eu/rest/v2/all?fields=name;flag;capital;population;languages"
  );
  let country =  await countries.json();
  return country;
};

const showCountries = () => {
  divInfo.innerHTML = "";
  fetchCountries().then(countries =>{
    countries
    .filter((country) =>
      country.name.toLowerCase().includes(search_term.toLowerCase())
    )
    .map((item) => markupAdd(item))
    .join("");
    divInfo.insertAdjacentHTML("beforeend", infoBlock);
  }).catch(err => {
      console.log(err)
  })
};

異步 Function 也返回一個 promise 所以稍后你可以使用 then catch 塊來處理這個

要在沒有異步等待的情況下做到這一點並且做得更清楚，你可以做這樣的事情

const fetchCountries = () => {
  fetch(
    "https://restcountries.eu/rest/v2/all?fields=name;flag;capital;population;languages"
  )
    .then((res) => res.json())
    .then((data) => {
      showCountries(data);
    })
    .catch((err) => {
      console.log(err);
    });
};

const showCountries = (countries) => {
  divInfo.innerHTML = "";
  countries
    .filter((country) =>
      country.name.toLowerCase().includes(search_term.toLowerCase())
    )
    .map((item) => markupAdd(item))
    .join("");
  divInfo.insertAdjacentHTML("beforeend", infoBlock);
};

Answer 2

像這樣更改您的 function：

async function fetchCountries() {
  response = await fetch ("https://restcountries.eu/rest/v2/all?fields=name;flag;capital;population;languages");
return await response.json();
};

在您調用 function 的地方，只需使用.then 即可獲取數據。

fetchCountries().then().catch();