After browsing Stack Overflow for some time, I finally created an account and am now asking my first question.
I recently began working with APIs to enhance my web development skills. I started by creating an anime information app that I enjoyed, and then moved on to another project focusing on NHL teams and rosters using an API from here.
The team info and logos section of my project is functioning well, but I am facing challenges when trying to retrieve the roster for each team. Although using .map() in my function displays the desired output in the console, adding the same code to .innerHTML only shows the last player's name instead of the entire roster. I have attempted for loops and promise chaining without success.
If anyone could provide guidance or point me in the right direction, I would greatly appreciate it.
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';
});
}