如何使用 JavaScript fetch 方法更新 DOM 以从 API 过滤用户数据？

Question

我希望从 API 获取数据并使用 JavaScript 获取功能在 HTML 页面中显示。 JavaScript 代码详述如下。我可以从API读取用户数据的console.log。但是，HTML 页面上没有按预期显示任何内容。


    <script>
      fetch('https://dummyjson.com/user')
        .then(response => response.json())
        .then(data => console.log(data));
    </script>

我似乎无法弄清楚缺少什么。

我添加了一个循环函数来检索和过滤 API 数据并将结果插入 HTML 标记，如下所示：

    <script>
      fetch('https://dummyjson.com/user')
        .then(result => {
          return result.json();
        })
        .then(data => console.log(data))
        .then(data => {
          data.forEach(user => {
            const show = `<p>${user.firstName}</p>`;
            let html = document.querySelector('item');
            html.insertAdjacentHTML('after begin', show);
          });
        });
    </script>

预期结果应该是所有用户的名字 (firstName)。

代码运行时，输出不会在 HTML 页面中显示预期结果。控制台日志没有显示任何错误。只是一张空白页。

完整代码如下：


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
          body {
        background: transparent;
        color: #2c0493;
        padding: 44px;
        margin: 0;
        height: 100vh;
        align-items: center;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
          Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
      }

      h3,
      h2 {
        margin: 0;
      }
    </style>
  </head>
  <body>
    <h2 id="header">GET Data from API</h2>
    <h3>And display in HTML with JavaScript</h3>
    <hr />
    <div id="item"></div>
    <script>
      fetch('https://dummyjson.com/user')
        .then(result => {
          return result.json()
        })
        .then(data => console.log(data))
        .then(data => {
          data.forEach(user => {
            const show = `<p>${user.firstName}</p>`
            let html = document.querySelector('item')
            html.insertAdjacentHTML('afterbegin', show)
          });
        });
    </script>
  </body>
</html>

更多截图在这里：

预期输出：

Answer 1

根据 querySelector() 文档：

Document 方法 querySelector() 返回其中的第一个元素与指定 CSS 选择器或 CSS 组匹配的文档选择器。如果未找到匹配项，则返回 null。块引用

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

您可以使用 getElementById() 来实现所需的结果，例如

let html = document.getElementById("item");
html.innerHTML = "<p>whatever you want<p>"

https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById

如何使用 JavaScript fetch 方法更新 DOM 以从 API 过滤用户数据？

问题描述投票：0回答：1

1个回答

最新问题

如何使用 JavaScript fetch 方法更新 DOM 以从 API 过滤用户数据？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1