我正在使用 fecth() 和 JSON 從 3rd 方 API 獲取一些詳細資訊。然后我想在我的 html 中顯示這些詳細資訊，以便它們呈現在頁面上。
我使用的 API 會回傳有關滑雪勝地的詳細資訊，例如，度假村名稱、天氣狀況和其他詳細資訊。
這是我的 fetch()
async function loadResortName() {
const response = await fetch('https://api.fnugg.no/search?q=Harpefossen',{
headers: {
//'Accept': 'application/json'
},
dataType: "json",
});
const resortName = await response.json();
console.log(resortName);
document.getElementById('test1').innerHTML = resortName.name
}
loadResortName();
<div id="test1">
[resort name should display here]
</div>
console.log 回傳一個復雜的 javascript 物件，它似乎包含嵌套的物件和陣列。我需要能夠在頁面上以 html 呈現：
- 度假村名稱
- 風名、mps 和速度
- 條件描述
- 天氣符號
這是物件如何回傳的控制臺螢屏截圖。正如您所看到的，這些詳細資訊嵌套在物件中，但我不知道如何訪問它們并將它們呈現在 html 頁面上，誰能給我一個如何執行此操作的示例？以我有限的知識，我以為我只能做一些類似resortName.name 的事情，但這失敗了。
uj5u.com熱心網友回復：
正如您提到的“https://api.fnugg.no/search?q=Harpefossen”回傳的不僅僅是度假村名稱。回應包含您需要的所有資料。
const resp = await fetch('https://api.fnugg.no/search?q=Harpefossen')
const data = await resp.json()
data.hits.hits[0]._source.name // hotel name
data.hits.hits[0]._source.conditions.current_report // weather report
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/385809.html
標籤：javascript 休息 获取-api