So, the issue that i am having is that im not being able to update the data when in session storage.
When i click on the image of the album, i want to store the data from the API call in session storage. However, when i click on another image, the session storage doesnt update properly, like, sometimes the values change, but sometimes it stays the same.
const _getAlbumInfoAPI = async (token, dataId) => {
try{
const result = await fetch(`https://api.spotify.com/v1/albums/${dataId}`, {
method: 'GET',
headers: {
'Authorization' : "Bearer " + token,
},
});
const data = await result.json();
return data;
} catch(err) {
console.error(err);
}
}
//This function will get the album id and send a request to the spotify API to get the album info.
const _getAlbumIdEvent = async () => {
try{
const albumContainers = document.querySelectorAll('.albumInfo');
albumContainers.forEach(album => {
album.addEventListener('click', async () => {
const dataId = album.dataset.albumid;
const data = await _getAlbumInfoAPI(token, dataId);
console.log(dataId)
console.log(data)
sessionStorage.setItem(`albumImg ${dataId}`, data.images[1].url);
sessionStorage.setItem(`albumType ${dataId}`, data.album_type);
sessionStorage.setItem(`albumName ${dataId}`, data.name);
sessionStorage.setItem(`albumArtist ${dataId}`, data.artists[0].name);
sessionStorage.setItem(`albumReleaseDate ${dataId}`, data.release_date);
sessionStorage.setItem(`albumTotalTracks ${dataId}`, data.total_tracks);
});
})
} catch(err){
console.error(err);
}
}
await _getAlbumIdEvent();
New contributor
chimi is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.