如何将通过API调用获取的数值数据写入H2标签中展示

存在的错误点 #

• 脚本放在<head>标签内执行时，页面<body>还未开始渲染，document.getElementsByClassName无法获取到目标p标签，拿到的是空集合
• 接口请求成功拿到lastClose数据后，没有编写将数据写入DOM元素的逻辑
• document.getElementsByClassName返回的是类数组的HTMLCollection对象，需要通过下标[0]取首个匹配的元素，才能直接修改内容

修正后的完整代码 #

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <h2><p class="u-text u-text-palette-3-base u-title u-text-3"></p>
    </h2>
    <script>
      const intervalTime = 10 * 1000;
      // 此时DOM已经加载完成，可以正常获取到目标元素
      const container = document.getElementsByClassName("u-text u-text-palette-3-base u-title u-text-3");
      const endpoint = "https://*************/v0/*******/************************/collections/****************?offset=0&limit=unlikely";
      function onInterval() {
        fetch(endpoint, {
          method: "GET",
          headers: { Authorization: "Bearer **********************" }
        })
        .then((res) => res.json())
        .then((data) => {
          const title = data.records.map((a) => {
            return{
              close: a.close
            };
          });
          const lastClose = title[title.length - 1];
          console.log(lastClose);
          // 新增代码：将数据写入目标元素
          if(container.length > 0) {
            container[0].textContent = lastClose.close;
          }
        });
      }
      onInterval();
      window.setInterval(onInterval, intervalTime);
  </script>
  </body>
</html>

核心修改说明 #

• 把原本放在<head>里的script标签移到了</body>标签之前，保证执行脚本时页面DOM已经渲染完成，可以正常获取到目标元素
• 新增了DOM赋值逻辑，将lastClose里的close属性值写入目标p标签的文本内容中
• 加了简单的判空逻辑，避免特殊情况找不到元素时报错

内容的提问来源于stack exchange，提问作者Gigi