使用fetch调用《权力的游戏》API报错：Cannot read property 'forEach' of undefined

咱们先拆解一下你遇到的两个核心问题：

1. API返回结构不匹配导致的forEach报错 #

你当前代码里尝试访问data_json.results，但这个https://api.got.show/api/general/characters/接口返回的直接是一个角色对象数组，根本没有results这个属性！这就是为什么会出现Cannot read property 'forEach' of undefined的报错——因为data_json.results是undefined，没法调用forEach。

你可以打开浏览器控制台看一下console.log(data_json)的输出，就能看到它直接是数组格式，比如[{name: "Jon Snow", ...}, {name: "Daenerys Targaryen", ...}]。

2. DOM结构操作错误 #

你现在把新的<option>嵌套在已有<option id="characters">里面，这不符合HTML规范——<option>不能作为另一个<option>的子元素。正确的做法是直接把新选项添加到<select>元素中。

另外还有个小问题：你的show函数用let声明，放在fetch调用之后，虽然JS变量声明会提升，但初始化是在后面，理论上可能导致调用时函数未定义的问题，建议改成函数声明或者把函数移到fetch前面。

修正后的完整代码 #

<body> 
  <h1>Game of thrones</h1> 
  <select id="character-select"></select> 
  <script> 
    // 先定义show函数，避免变量提升问题
    function show(characters) { 
      const selectElement = document.getElementById('character-select');
      characters.forEach((element) => { 
        const option = document.createElement('option');
        option.className = "character";
        option.textContent = element.name;
        selectElement.appendChild(option);
      }); 
    }

    fetch('https://api.got.show/api/general/characters/') 
      .then(response => response.json()) 
      .then(data => { 
        console.log(data);
        show(data);
      }) 
      .catch(err => alert(`Ha habido un error. ${err}`)) 
  </script> 
</body>

关键改动点： #

• 移除了嵌套的<option>，给<select>加上了id="character-select"，方便直接获取
• 把show函数改成函数声明，提前定义
• 遍历的是接口返回的直接数组characters（也就是原代码里的data_json），不再访问results
• 使用createElement和appendChild来创建添加选项，比直接拼接innerHTML更可靠（避免特殊字符问题）

现在运行代码，就能看到下拉框里填充好所有《权力的游戏》角色啦！

内容的提问来源于stack exchange，提问作者Ana Fernández