在 JavaScript 中使用 fetch() 时，如何将返回对象的详细信息渲染到 html 页面

Question

我将 fecth() 与 JSON 结合使用，从第三方 API 获取一些详细信息。然后我想在 html 中显示这些详细信息，以便它们呈现在页面上。

API我正在使用returns有关滑雪胜地的详细信息，例如，度假村名称、天气状况和其他详细信息。

这是我的 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 returns 一个似乎包含嵌套对象和数组的复杂 javascript 对象。我需要能够在页面 html 中呈现：

度假村名称
风名、mps 和速度
condition_description
天气符号

这是对象 returns 控制台的屏幕截图。如您所见，这些详细信息嵌套在对象中，但我不知道如何访问它们并将它们呈现在 html 页面上，谁能给我一个如何执行此操作的示例？以我有限的知识，我以为我只能做类似 resortName.name 的事情，但这失败了。

Answer 1

正如您提到的“https://api.fnugg.no/search?q=Harpefossen”returns 不仅仅是度假村名称。响应包含您需要的所有数据。

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

在 JavaScript 中使用 fetch() 时，如何将返回对象的详细信息渲染到 html 页面

When using fetch() in JavaScript how do I render details from the returned object onto the html page

javascript

rest

fetch-api