时间戳

首页 > 解决方案 > 如何获取局部变量以更新 html(fetch) 中的全局变量？

javascript - 如何获取局部变量以更新 html(fetch) 中的全局变量？

问题描述

我的代码：

var total_cases  = 0;
var new_cases    = 0;
var total_deaths = 0;

fetch('https://covid.ourworldindata.org/data/owid-covid-data.json')
  .then(res => {
    return res.json()
  })
  .then (raw_data => {

    for (const key in raw_data) {
      const country      = raw_data[key];
      const country_data = country.data;
      const latest_data  = country_data[country_data.length - 1];

      console.log(latest_data);

      if (country.location != "World") {
        if (latest_data.total_cases != null) {
          total_cases += latest_data.total_cases;
        }
        if (latest_data.new_cases != null) {
          new_cases += latest_data.new_cases;
        }
        if (latest_data.total_deaths != null) {
          total_deaths += latest_data.total_deaths;
        }
      }
      console.log(total_cases); /*It will give a result for every loop*/
    }
  })

document.getElementById("total_cases").innerHTML  = total_cases;
document.getElementById("new_cases").innerHTML    = new_cases;
document.getElementById("total_deaths").innerHTML = total_deaths;

如果我这样做：

<div id="total_cases"></div>

结果为0。要更改的代码是什么？我知道有人可能已经回答了有关函数的类似问题，但我仍然不了解 fetch 的范围。

标签： javascripthtmljson

解决方案

var total_cases  = 0;
var new_cases    = 0;
var total_deaths = 0;

fetch('https://covid.ourworldindata.org/data/owid-covid-data.json')
.then(res => {
  return res.json()
})
.then (raw_data => {

for (const key in raw_data) {
  const country      = raw_data[key];
  const country_data = country.data;
  const latest_data  = country_data[country_data.length - 1];

  console.log(latest_data);

  if (country.location != "World") {
    if (latest_data.total_cases != null) {
      total_cases += latest_data.total_cases;
    }
    if (latest_data.new_cases != null) {
      new_cases += latest_data.new_cases;
    }
    if (latest_data.total_deaths != null) {
      total_deaths += latest_data.total_deaths;
    }
  }
  console.log(total_cases); /*It will give a result for every loop*/
}

document.getElementById("total_cases").innerHTML  = total_cases;
document.getElementById("new_cases").innerHTML    = new_cases;
document.getElementById("total_deaths").innerHTML = total_deaths;

})

将分配移动到“then”上下文中

推荐阅读