我想弄清楚如何在選擇中顯示來自 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();
uj5u.com熱心網友回復:
您的代碼包含一些簡單的錯誤,您應該能夠在瀏覽器的控制臺中看到這些錯誤,這將為您提供有關為什么它不起作用的線索。
首先,html在嘗試附加到它之前,您會看到它沒有定義。你不能附加到不存在的東西。
如果你解決了這個問題,那么你會看到它key,然后obj也沒有定義。目前尚不清楚您期望它們來自何處或您認為它們將包含什么。我想知道您是否只是簡單地復制并粘貼了您找到的一些代碼,而沒有停下來正確檢查它或考慮它是否適合您粘貼到的背景關系。
您可以通過以下方式非常直接地解決這些問題
html在回圈開始之前宣告為空字串,因此=有要附加的內容
- 在創建 時
<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>
轉載請註明出處,本文鏈接:https://www.uj5u.com/net/314894.html
標籤:javascript html json 接口
