新手求助：API获取的数据无法填充HTML表格怎么办？

你的代码存在两个核心问题导致表格无法正确渲染数据，还有一处细节可以优化：

1. 错误使用innerText而非innerHTML #

innerText仅用于设置元素的纯文本内容，会把你拼接的HTML字符串原样显示成文本，不会解析成表格的DOM结构。必须改用innerHTML才能让浏览器识别并渲染HTML代码。

2. 表格结构不规范 #

你的表格已经划分了<thead>（表头）和<tbody>（表体），但你把表头行和数据行全部拼在一起赋值给整个表格，不符合HTML表格的结构规范，应该分别将表头放到<thead>、数据行放到<tbody>。

3. 列名与数据不匹配（细节优化） #

你表头里写的是"Weather"列，但实际填充的是zipcode（邮政编码）数据，这会造成混淆，建议修正列名或者替换为对应字段。

修正后的代码： #

HTML部分（保持原有结构即可）：

<h1>Nasa Facilities</h1>

<table id="table">
    <thead></thead>
    <tbody></tbody>
</table>

<script src="main.js"></script>
</body>

JavaScript部分：

fetch('https://data.nasa.gov/resource/gvk9-iz74.json')
    .then((res) => res.json())
    .then((data) => {
        // 生成表头并插入到thead
        const thead = document.querySelector('#table thead');
        thead.innerHTML = `<tr><th>Center</th><th>City</th><th>State</th><th>Zip Code</th></tr>`;
        
        // 生成数据行并插入到tbody
        const tbody = document.querySelector('#table tbody');
        let rows = '';
        data.forEach((facility) => {
            rows += `<tr>
                <td>${facility.center || 'N/A'}</td>
                <td>${facility.city || 'N/A'}</td>
                <td>${facility.state || 'N/A'}</td>
                <td>${facility.zipcode || 'N/A'}</td>
            </tr>`;
        });
        tbody.innerHTML = rows;
    })
    .catch(err => console.error('数据获取失败:', err)); // 新增错误捕获，方便调试

新手调试建议： #

一定要学会用浏览器开发者工具（按F12打开）：

• Console面板：查看请求失败、变量未定义等错误信息
• Network面板：确认API请求是否成功返回数据

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