Почему не получается манипулировать с объектом после заполнения его внутри fetch?

Question

У меня есть функция getData() {...}, внутри нее с помощью fetch() и .then заполняется объект, который объявлен в глобальной области видимости с помощью var. После описания тела функции, я сразу же запускаю ее: getData(); после чего вывожу заполненный внутри функции объект в консоль. Объект выводится как надо, все данные есть. НО! как только я пытаюсь сделать какие-то манипуляции с объектом вне функции, он всегда почему-то пустой и его length = 0. В чем может быть проблема и как это исправить?

Answer 1

Как вариант (только, кажется, вам не нужно дважды получать данные из сети по одному и тому же адресу, можно один раз):

async function getData(requestOptions, countriesData) {
  //Получаем общее число случаев заражения по всей планете
  //Получаем страны и кол-во случаев заражения за весь период для каждой страны
  const res = await fetch('https://api.covid19api.com/summary', requestOptions);
  const json = await res.json();

  covidGlobalCases.innerHTML = json.Global.TotalConfirmed;

  json.Countries.forEach((country) => {
    //console.log(country.Country + ': ' + country.TotalConfirmed);
    countriesData[country.Country] = country.TotalConfirmed;
  });
}

(async function main() {
  try {
    const requestOptions = {
      method: 'GET',
      redirect: 'follow'
    };

    const countriesData = {};
    await getData(requestOptions, countriesData);

    console.log(countriesData);
    console.log(Object.keys(countriesData).length);

    const sortedCountriesData = Object.keys(countriesData).sort(function(a, b) {
      return countriesData[a] - countriesData[b];
    });
    console.log(sortedCountriesData);
  } catch (err) {
    console.error(err);
  }
})();

<div id='covidGlobalCases'></div>

БЛОГ НА HUSL

Почему не получается манипулировать с объектом после заполнения его внутри fetch?

Ответы (1 шт):