调用fetch获取JSON接口数据时表格无返回数据问题求助

API地址以.json结尾不会导致数据填充失败，这是接口的常规命名方式，和请求是否成功、返回是否可正常解析没有任何冲突。

故障原因 #

你的代码错误解析了接口返回的数据结构：当前调用的接口返回值本身就是数组结构，不存在外层的data属性。代码中写的record.data[0]会触发Cannot read properties of undefined (reading '0')运行时错误，直接中断后续DOM赋值逻辑，导致表格框架渲染正常但没有内容填充。

修复方法 #

将JS逻辑中所有取数路径的record.data[0]替换为record[0]即可，修正后的完整代码如下：

async function fetchData() {
  const res = await fetch('https://api.covidtracking.com/v1/us/current.json');
  const record = await res.json();
  document.getElementById('date').innerHTML = record[0].date;
  document.getElementById('positive').innerHTML = record[0].positive;
  document.getElementById('death').innerHTML = record[0].death;
  document.getElementById('deathIncrease').innerHTML = record[0].deathIncrease;
}
fetchData();

前端接口问题通用排查步骤 #

• 按F12打开浏览器开发者工具，先查看Console面板的报错信息，绝大多数前端逻辑错误都会在这里直接打印明确原因
• 切换到Network面板，找到对应的接口请求：
  • 状态码为2xx代表请求成功，4xx代表请求路径/参数存在前端侧问题，5xx代表接口服务端故障
  • 点击请求后查看Response标签页的实际返回内容，对照真实的JSON结构编写取值逻辑，不要预设返回字段层级
• 给异步请求加错误捕获，方便快速定位异常：

fetchData().catch(err => console.error('数据获取异常：', err))

内容的提问来源于stack exchange，提问作者añdré tâtè