Хранение объекта внутри переменной из API javascript

Question

Я пытаюсь сохранить объекты JSON, возвращаемые из API.Я храню объект в переменной с именем obj, однако я не могу понять, почему я не могу использовать эту переменную в функции для получения определенных свойств этого объекта.

var obj;

btn_top.addEventListener("click", function () {
  fetch(url)
    .then(res => res.json())
    .then(data => obj = data)
    .then(() => console.log(obj))
  var profit = [];
  console.log("testing");
  console.log(obj);
  Object.values(obj).forEach(e=> {
    var eProfit = e.sell_average;
    profit.push(eProfit);
  });
  console.log(profit);
});

Я получаю следующую ошибку.

main.js:46 Uncaught TypeError: Cannot convert undefined or null to object

Я могу правильно вернуть объект при использовании

.then(() => console.log(obj))

, однако после этого я получаю ошибки.

Спасибо.

Answer 1

Как ты можешь это сделать!Выборка асинхронна, пожалуйста, прочтите документ!

следующие строки после

.then (() => console.log (obj))

Не запускаются, когда выборка заканчивается, но раньше.

Ваш "следующий" код должен быть внутри последнего обратного вызова Fetch:

  fetch(url)
  .then(res => res.json())
  .then(jsonData=> {
    let profit = [];
    Object.values(jsonData).forEach(e=> {
      var eProfit = e.sell_average;
      profit.push(eProfit);
    });
  });

Answer 2

Попробуйте использовать асинхронные функции .Код намного чище и проще для понимания.https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function

Answer 3

obj не определено, поскольку запись в лог и цикл forEach выполняется до Обещание разрешается, и obj назначается в качестве результирующих данных из вызова Обещания.

Когда вы имеете дело с Promises (т.е. асинхронным кодом), вам необходимо выполнить все манипуляции с данными в блоке then().