如何从COVID-19 API提取指定数据并在HTML页面展示？

我来帮你排查下问题，主要有几个关键点需要修正：

1. 解析JSON数据而非文本 #

你当前用response.text()获取的是字符串格式的响应内容，无法直接通过.访问对象属性。应该用response.json()把响应自动解析成JavaScript对象，这样才能像操作普通JS对象一样提取字段。

2. 变量名与API结构不匹配 #

• 你后续代码里用了data，但原代码中第二个then的参数是result，变量名完全不一致，自然找不到对应数据；
• COVID-19 API返回的全局数据字段是大写开头的Global，不是小写的global，这也是无法获取数据的核心原因之一。

3. 确保HTML存在目标元素 #

要先在HTML里添加一个id为tdeaths的元素，否则JS找不到对应的DOM节点，就算拿到数据也无处展示，比如：

<p>全球累计死亡人数：<span id="tdeaths"></span></p>

修正后的完整代码 #

var requestOptions = { method: 'GET', redirect: 'follow' };
fetch("https://api.covid19api.com/summary", requestOptions)
 .then(response => response.json()) // 改成解析JSON格式数据
 .then(result => {
    // 正确访问API返回的Global.TotalDeaths字段
    let tdeaths = result.Global.TotalDeaths;
    // 先确认DOM元素存在再赋值，避免报错
    const deathsElement = document.getElementById('tdeaths');
    if (deathsElement) {
      deathsElement.innerHTML = tdeaths.toLocaleString('en');
    } else {
      console.log('页面中未找到id为tdeaths的元素');
    }
 })
 .catch(error => console.log('error', error));

额外提示 #

• 可以先在then里执行console.log(result)，查看API返回的完整结构，确认字段名的大小写和层级关系；
• 如果页面加载时JS代码先执行了，可能会出现找不到DOM元素的情况，你可以把JS代码放在DOMContentLoaded事件里，或者直接放在HTML页面的底部：

document.addEventListener('DOMContentLoaded', function() {
  // 把上面的fetch代码放在这里
});

内容的提问来源于stack exchange，提问作者Nathan Brown