Невозможно выполнить поиск по входному значению с использованием полученных данных. Получение ошибки фильтра

Question

Попытка сделать запрос, который зависит от входной оценки. Я использую программный интерфейс для стран. Желаемый доход - это проанализированная информация из 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

Измените вашу функцию следующим образом:

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

И там, где вы вызываете функцию, просто используйте .then для получения данных.

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

Answer 2

Функция fetchCounries ничего не возвращает, один способ решения проблемы будет следующим.

• Преобразуйте функцию в async функцию
• , а затем верните данные, которые вы получите.

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)
  })
};

Asyn c Функция также возвращает обещание, поэтому позже вы можете обработать это, используя затем блок catch

, чтобы сделать это без asyn c подождите и сделайте более понятным, можно сделать что-то вроде этого

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);
};