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

Posted 2023-02-19

【中文标题】在 JavaScript 中使用 fetch() 时，如何将返回对象的详细信息呈现到 html 页面上

【英文标题】：When using fetch() in JavaScript how do I render details from the returned object onto the html page

【发布时间】：2022-01-20 05:42:40

【问题描述】：

我正在使用带有 JSON 的 fecth() 从第 3 方 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 的事情，但这失败了。

【问题讨论】：

到目前为止你尝试了什么？

developer.mozilla.org/en-US/docs/Learn/JavaScript/…

@Krzysztof Krzeszewski 我尝试在页面上设置一个 ID 为 test1 的 div，然后使用 document.getElementById('test1').innerHTML = resortName.name 设置 innerHTML。这将返回“未定义”。

@KrzysztofKrzeszewski 我刚刚发现 document.getElementById('test1').innerHTML = resortName.hits.hits[0]._source.name 有效，但现在我有一个新问题，[0 ] 返回一个数组。 api.fnugg.no/search?q=Harpefossen 很快就会成为一个搜索查询 我将使“Harpefossen”动态化，因此用户将输入一个名称，并且该数组可以是多个整数 [0]、[1]、[2] 我需要在页面上呈现所有这些?

【参考方案1】：

正如您提到的，“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

【讨论】：

这是正确的答案，我有一点点不同，因为我已经这样做了 document.getElementById('test1').innerHTML = resortName.hits.hits[0]._source。名称是一样的。 @VijayKumar 如您所见，这是返回由 [0] 显示的对象数组。您知道搜索词是否不同并且它在数组中返回了多个对象，例如 [0]、[1]、[2 ] 我将如何渲染所有这些？

例如，api.fnugg.no/search?q= 将返回数组中的 19 个匹配项。如何在我的 div 中显示所有 19 个度假村名称？

一旦你得到了数组中的数据。您可以使用任何数组方法来迭代每个项目。如果 data 是一个数组，那么逻辑就像 data.forEach(item => /*add to dom*/)

你可能想要使用 document.createElement 和 document.appendChild 函数。