时间戳

首页 > 解决方案 > 使用 forEach() 或 map() 循环更改 innerHTMLs 不能可靠地工作

javascript - 使用 forEach() 或 map() 循环更改 innerHTMLs 不能可靠地工作

问题描述

这个可能是独一无二的，所以我希望我能在这里得到一些见解。我正在设计一个 node.js 服务器 Web 应用程序，它使用 HTML 页面和脚本与 Spotify 的 Web API 连接。从脚本/api，它返回一个数组，我将它与 forEach() 或 map() 循环（我都尝试过）一起使用来填充 HTML 中的这些空格，这些空格的格式如下：

<div class="d-flex align-items-center">
 <div class="user-img" id="recP1" style="background-image: url(images/orangeRedgrad.jpg)"></div>
  <div class="pl-3">
   <p class="name" id="recN1">No Song Name</p>
   <span class="position" id="recA1">No Artist Name .-.</span>
  </div>
 </div>
</div>

填充这些 ID 空间的代码如下所示：

    .then(function (data) {
        var x = 1;
        trackURIs = [];
        console.log(data);
        data.tracks.forEach((data) => {
            //the three console.logs in this section are to show that the array received the data.
            console.log(x + ':');
            console.log(data.name);
            console.log(data.artists[0].name);
            trackURIs.push(data.uri);
            document.getElementById("recP" + x + "").style.backgroundImage = "url(" + data.album.images[0].url + ")";
            document.getElementById("recN" + x + "").innerHTML = data.name;
            document.getElementById("recA" + x + "").innerHTML = data.artists[0].name;
            x += 1;
        });
        //console.log(trackURIs);
    });

我的问题是 x=11 到 x=20 的空格会在有人第一次获得推荐时填满，但此后每次都不会更改并将以前的数据保留在那里。在搜索某些艺术家时，他们甚至不会第一次填写。我的控制台显示我已收到数据，所以我有点不知道为什么 11-20 只是有时没有响应。

对于 forEach() 和 map() 都是如此。

当改变 API 请求的歌曲数量时（比如从 2​​0 -> 12），同样的情况是只有前 10 首被代码可靠地改变，而 x=11 和 x=12 可能只改变第一个时间和之后没有或根本没有。

此图显示了请求 12 首歌曲推荐的第二次运行，其中前 10 首已更改，但 11 和 12 未更改。

标签： javascripthtmlspotify

解决方案

推荐阅读