Search code examples
javascriptspotify

Json Response Empty - Spotify API


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.


Solution

  • 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