Javascript 控制台的Logging.map（）大致显示了我想要的内容，但通过innerHTML添加的同一行代码只显示了最后一项

在跟踪堆栈溢出一段时间后，我终于有了一个账户，这是我第一次真正提出问题

所以我最近开始使用API来更好地进行web开发。在创建了一个我喜欢的动漫信息应用程序后，我开始了另一个项目，但针对NHL团队和名册，我在这里使用了API：

球队信息和标志部分运作良好，但我正试图为每个球队拉名册，这就是我的开始。在我的函数中使用.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';
  });
}

函数getRosterByID（团队ID）{
取回(`https://statsapi.web.nhl.com/api/v1/teams/${teamID}/花名册`）
.then（res=>res.json（））
。然后（数据=>{
数据。花名册。地图（球员=>{
console.log（players.person.fullName）；
花名册.innerHTML=`
${players.person.fullName}
`;
}).join（）；
花名册.style.display='flex'；
});
}

使用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';
  });
}

函数getRosterByID（团队ID）{
取回(`https://statsapi.web.nhl.com/api/v1/teams/${teamID}/花名册`）
.then（res=>res.json（））
。然后（数据=>{
constHtmlout=data.lotus.map（玩家=>{
console.log（players.person.fullName）；
返回`
${players.person.fullName}
`;
}).加入（“”）；
花名册.innerHTML=htmlOut；
花名册.style.display='flex'；
});
}

floster.innerHTML=

将把整个内容设置为右侧的字符串。元素中以前存在的任何内容都将被删除。您需要的是

+=

。您还应该删除

.map

并改用

forEach

-

.map

用于构建新阵列，而不是用于一般副作用谢谢，上面的示例确实有效。虽然，为了我的生命，我不能得到任何东西。控制台再次说明了我想要的内容，但附加到HTML元素的所有内容都显示为未定义。map（）是实现这一点的方法。我不知道为什么在没有看到您所做的事情的情况下，您使用forEach的方式就无法工作。因此我也创建了一个JSFIDLE帐户，认为展示我所做的事情可能会更容易一些。最后的视图看起来有点不对劲，因为我还没有添加媒体查询和团队徽标。JPG不在掌控之中。getRosterByID函数中注释掉的块是我正在使用的，同一函数中的forEach是我正在使用的。另外，如果您不介意对我的代码给出一些总体反馈，我将非常感谢。