search(term) {
//Spotify.getAccessToken() will RETURN accessToken from previous method.
const accessToken = Spotify.getAccessToken();
//Remember to RETURN the fetch
return fetch(`https://api.spotify.com/v1/search?type=track&q=${term}`, {
headers: {
'Authorization': `Bearer ${accessToken}`
}
})
.then(response => {
if (response.ok) {
console.log(response);
return response.json;
};
throw new Error('Request failed!');
}, networkError => {
console.log(networkError.message);
})
.then(jsonResponse => {
if (!jsonResponse.tracks) {
return [];
};
return jsonResponse.tracks.items.map(track => ({
id: track.id,
name: track.name,
artists: track.artists[0].name,
album: track.album.name,
uri: track.uri
}));
});
}
In this method, when I send the GET request, the console logs the initial response, but when I check the actual content of the response it is empty and doesn't contain any tracks. Yet, when I type the end point url (specified in fetch()), I can see the results in the browser. I've been trying to find a solution for a few hours but I can't see what I'm doing wrong.
Thanks.
chain a .catch on the promise and console the error, oh and btw you should return a
response.json()
like a function from there not just response.json