使用Fetch API获取数据到HTML表格报错：data.list不可迭代

核心错误原因 #

News API返回的JSON结构中，新闻列表对应的字段是articles，而非你代码中使用的list。data.list不存在，自然无法被迭代，导致报错。

修正后的代码 #

JavaScript部分（news.js） #

// 修正API URL的协议部分，补全//
const api_url =
    "https://newsapi.org/v2/top-headlines?sources=techcrunch&apiKey=xxxxxxxxx";

// 定义异步函数
async function getapi(url) {
    
    // 存储响应
    const response = await fetch(url);
    
    // 解析为JSON格式
    var data = await response.json();
    console.log(data);
    if (response.ok) { // 改用response.ok判断请求是否成功，更准确
        hideloader();
    }
    show(data);
}

// 隐藏加载动画
function hideloader() {
    document.getElementById('loading').style.display = 'none';
}

// 生成表格HTML
function show(data) {
    let tab =
    `<tr>
    <th>作者</th>
    <th>标题</th>
    <th>描述</th>
    <th>原文链接</th>
    </tr>`;
    
    // 修正循环对象为data.articles
    for (let r of data.articles) {
        tab += `<tr>
            <td>${r.author || '无作者信息'}</td> <!-- 处理字段为空的情况 -->
            <td>${r.title}</td>
            <td>${r.description || '无描述信息'}</td>
            <td><a href="${r.url}" target="_blank">点击查看</a></td> <!-- 把URL改为可点击链接 -->
            </tr>`;
    }
    // 插入表格内容
    document.getElementById("news").innerHTML = tab;
}

// 等待DOM加载完成后再调用API，避免找不到页面元素
document.addEventListener('DOMContentLoaded', () => {
    getapi(api_url);
});

HTML部分 #

<!DOCTYPE html>
<html lang="en">
    <head>
        <link rel="stylesheet" href="test.css" />
        <meta charset="UTF-8" />
        <meta name="viewport" 
              content="width=device-width, initial-scale=1.0" />
        <title>TechCrunch头条新闻</title>
    </head>
    <body>
        <!-- 加载动画 -->
        <div class="d-flex justify-content-center">
            <div class="spinner-border" 
                 role="status" id="loading">
                <span class="sr-only">Loading...</span>
            </div>
        </div>
        <h1>TechCrunch头条新闻</h1>
        <!-- 新闻表格 -->
        <table id="news"></table>
        
        <!-- 将script移到body末尾，确保DOM已加载完成 -->
        <script src="news.js"></script>
    </body>
</html>

额外排查方向 #

• 确认API返回结构：查看浏览器控制台console.log(data)的输出，验证返回数据的字段名称，比如News API的标准结构是{ status: "ok", totalResults: 数字, articles: [新闻数组] }，必须使用对应字段。
• 判断请求是否成功：原代码用if (response)判断不够准确，改用response.ok（对应状态码200-299），能更精准识别请求是否成功。
• DOM加载时机：原script放在head中时，页面元素还未渲染，可能导致getElementById返回null，将script移到body末尾或用DOMContentLoaded事件触发API调用可以解决。
• 处理空值字段：部分新闻的author或description可能为空，直接插入会显示undefined，可以用||设置默认值优化显示效果。

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