JavaScript调用API获取的JSON数据无法在HTML中展示问题排查

安全阿岳

2026-10-5

问题根源

你错误地将数组索引[b]拼接进了JSON的键名字符串里，实际API返回的结构中，Tool${a}本身是一个数组对象，并不存在名为ToolX[Y]的独立字段。你拼接出来的键名在返回的JSON对象中不存在，自然会返回undefined。
若你的JSON结构中Tool字段总数不足44组，写死的循环条件a<45也会导致部分Tool键名不存在，触发undefined。

修正后代码

<script>
async function load(){
      let link = 'Here is API address';
      // 增加请求错误捕获，避免异常无反馈
      try {
        let data = await fetch(link);
        if(!data.ok) throw new Error('接口请求异常')
        let obj = await data.json();

        var temp = "";
        // 动态获取实际返回的Tool字段总数，避免写死数值越界
        const totalTools = Object.keys(obj).filter(key => key.startsWith('Tool')).length;
        for(var a=1; a<=totalTools; a++){
            const currentTool = obj[`Tool${a}`];
            // 非法值直接跳过渲染
            if(!Array.isArray(currentTool)) continue;
            temp += "<tr>";
            // 取当前Tool数组的对应索引，不要把索引写入键名
            for(var b=0; b<Math.min(5, currentTool.length); b++){
              // 空值兜底，避免显示undefined
              temp += `<td>${currentTool[b] ?? ''}</td>`;
            }
            temp += "</tr>";
        }
        document.getElementById("data_from_db").innerHTML = temp;
      } catch (e) {
        console.error('加载数据失败:', e)
      }
  }
  load();
</script>