显示一个带有来自 API 的信息的 <select>？

Question

我正在尝试弄清楚如何在选择中显示来自 API 的信息。

用户必须选择一个自身链接到 api 的起始站。但我无法在我的选择中创建包含每个电台名称的选项。

你能帮我理解我的错误吗？

<section class="container">
  <div class="item">
  <p>list</p>
  <select id="subwaystation"> 
  </select>

var apiStations = "https://api-ratp.pierre-grimaud.fr/v4/stations/metros/8";

function req1() {
fetch(apiStations, {
  method: "get"
})
  .then(response => response.json())
  .then(data => {
   let allstations= data.result.stations;
    for(var i = 0; i < allstations.length; i++) {
      html += "<option value=" + key  + ">" +obj[key] + "</option>"
  }
  document.getElementById("subwaystation").innerHTML = html;
  })
}
req1();

Answer 1

您的代码包含一些简单的错误，您应该能够在浏览器的控制台中看到这些错误，这将为您提供有关它为什么不工作的线索。

首先你会看到html 在你尝试追加之前没有定义。你不能附加到不存在的东西上。

如果你解决了这个问题，你会看到key 和obj 也没有定义。目前尚不清楚您期望这些来自何处或您认为它们将包含什么。我想知道您是否只是简单地复制并粘贴了一些您找到的代码，而没有停下来正确检查它或考虑它是否适合您将其粘贴到的上下文。

您可以通过以下方式非常直接地解决这些问题

1. 在循环开始之前将html 声明为空字符串，因此+= 可以附加一些内容

1. 在创建<option时，引用循环当前索引（i）处的站对象，然后在该对象中找到的特定属性（slug和name，如原始图所示JSON)，而不是使用key 和obj，它们不是来自代码中的其他任何地方。

演示：

var apiStations = "https://api-ratp.pierre-grimaud.fr/v4/stations/metros/8";

function req1() {
  fetch(apiStations, {
      method: "get"
    })
    .then(response => response.json())
    .then(data => {
      let allstations = data.result.stations;
      let html = '';
      for (var i = 0; i < allstations.length; i++) {
        html += "<option value=" + allstations[i].slug + ">" + allstations[i].name + "</option>"
      }
      document.getElementById("subwaystation").innerHTML = html;
    })
}
req1();

<select id="subwaystation">
</select>