时间戳

首页 > 解决方案 > 将 .map() 记录到控制台大致显示了我想要的内容，但通过 innerHTML 添加的同一行代码仅显示最后一项

javascript - 将 .map() 记录到控制台大致显示了我想要的内容，但通过 innerHTML 添加的同一行代码仅显示最后一项

问题描述

在跟踪 Stack Overflow 一段时间后，我终于注册了一个帐户，这是我第一次真正提出问题。

所以我最近开始使用 API 来更好地进行 Web 开发。在构建了一个我喜欢的动漫信息应用程序后，我开始了另一个项目，但对于 NHL 团队和名册使用 API 从这里：https ://gitlab.com/dword4/nhlapi/-/blob/master/stats-api.md

团队信息和徽标部分运作良好，但我正在尝试为每个团队拉名册，这就是我开始崩溃的地方。在我的函数中使用 .map() 会在控制台中产生一些我想要的结果，但是当添加到 .innerHTML 时，相同的代码只会产生最后一个玩家的名字，而不是整个花名册。我添加了 for 循环并尝试链接承诺，但没有运气。

如果有人能指出我正确的方向，将不胜感激。

 function getRosterByID(teamID){
  fetch(`https://statsapi.web.nhl.com/api/v1/teams/${teamID}/roster`)
  .then(res => res.json())
  .then(data => {
    data.roster.map(players => {
      console.log(players.person.fullName);
      roster.innerHTML = `
      <div>
        <dl>
          <dt>${players.person.fullName}</dt>
        </dl>
      </div>`;
    }).join();
    roster.style.display = 'flex';
  });
}

标签： javascriptarrays

解决方案

当您使用 innerHTML 时，它不会附加。这是一个彻底的替代品。您也不应该将 map() 用作循环，这就是 foreach 的用途。

但是使用地图，你可以得到所有的文字

 function getRosterByID(teamID){
  fetch(`https://statsapi.web.nhl.com/api/v1/teams/${teamID}/roster`)
  .then(res => res.json())
  .then(data => {
    const htmlOut = data.roster.map(players => {
      console.log(players.person.fullName);
      return  `
      <div>
        <dl>
          <dt>${players.person.fullName}</dt>
        </dl>
      </div>`;
    }).join('');
    roster.innerHTML = htmlOut;
    roster.style.display = 'flex';
  });
}

推荐阅读