I am trying to show some songs from an album API dynamically on a page but it is refusing to display. If you can help me solve the problem I will appreaciate.
This is the link to the github: https://github.com/jruto/stackoverflowhelp
This problem is in the javascript file
Thanks in advance
Several issues.
track.data gave error too
/** @format */
window.addEventListener("load", getSongs)
function getSongs() {
fetch("https://striveschool-api.herokuapp.com/api/deezer/album/75621062")
.then((response) => response.json())
.then((obj) => {
showSongs(obj)
})
.catch((err) => console.error(err.message))
}
function showSongs(album) {
const displaySongs = document.getElementById("artist-songs")
displaySongs.innerHTML = `
<div class="table-body mt-3">
<div class="d-flex hash">
<h6 class="text-light">1</h6>
</div>
<div class="d-flex cover title">
<div class="cover-son">
<img src="${album.cover_small}" width="45" />
</div>
<div class="co">${album.tracks.data.map(({title}) => title).join('<br/>')}
<br />
<a id="a2" href="">${album.artist.name}</a>
</div>
</div>
<div class="d-flex album">
<span class="text-light album">${album.title}</span>
</div>
<div class="d-flex date-added">
<span class="text-light">${album.release_date}</span>
</div>
<div class="d-flex duration">
<span class="text-light">${album.duration}</span>
</div>
</div>`
}<div id="artist-songs"></div>