Jamming Project : Unhandled Rejection (TypeError): Cannot read property 'id' of undefined

https://www.codecademy.com/paths/web-development/tracks/front-end-applications-with-react/modules/jammming/projects/jammming-prj

Hi there,
I have gotten into a problem. Whenever, I tried to save my playist, I saw the error message:

Can you show me a screenshot or the json of the jsonResponse being printed out, probably just a destructuring issue

1 Like

Thank you for trying to help me out. However, I solved the problem. I forgot to add return keyword in handler success function to chain another promise.

https://www.codecademy.com/paths/web-development/tracks/front-end-applications-with-react/modules/jammming/projects/jammming-prj

Hello,
I have been in this project for a few days. After I finished at step 96, I ran into a problems. this is the error message:


I tried a lot of ways to understand where is the problem. Finally, I admitted that I need some help. this is my code.

> const clientId='db9d7f48da4942359e0fd8e187bb28c7';
> const redirectUri= "http://localhost:3000/";
> let accessToken;
> 
> const Spotify= {
>     search(term) {
>         const accessToken= Spotify.getAccessToken();
>         return fetch(`https://api.spotify.com/v1/search?type=track&q=${term}`,{
>             headers: {
>                 Authorization: `Bearer ${accessToken}`
>             }
>         }).then( response => {
>             console.log(response);
>             return response.json();
>         }).then( jsonResponse => {
>             if(!jsonResponse.tracks){
>                 return [];
>             }
>             console.log(jsonResponse);
>             return jsonResponse.tracks.items.map( track => ({
>                 id: track.id,
>                 name: track.name,
>                 artist: track.artists[0].name,
>                 album: track.album.name,
>                 uri: track.uri
>             }));
>         })
>     },
>     
>     savePlayist(name,trackUri){
>         if(!name || !trackUri.length){
>             return;
>         }
> 
>         const accessToken= Spotify.getAccessToken();
>         const headers={
>             Authorization: `Bearer ${accessToken}`
>         };
>         let userId;
> 
>         return fetch('https://api.spotify.com/v1/me', { 
>             headers: headers 
>         }
>         ).then( response => response.json()
>         ).then(jsonResponse => {
>             userId = jsonResponse.id;
>             return fetch(`https://api.spotify.com/v1/users/${userId}/playlists`, 
>             {
>                 headers: headers,
>                 method: "POST",
>                 body: JSON.stringify({ name: name })
>             }).then(response =>{
>                 response.json();
>                 console.log(response);
>             }).then(jsonResponse => {
>                 console.log(jsonResponse);
>                 const playistId= jsonResponse.id;
>                 return fetch(`https://api.spotify.com/v1/playlists/${playistId}/tracks`,
>                 {
>                     headers: headers,
>                     method: 'POST',
>                     body: JSON.stringify({ uri: trackUri })
>                 })
>             })
>         })
>     },
> 
>     getAccessToken() {
>         if(accessToken){
>             return accessToken;
>         }
> 
>         // check for access token match
> 
>         const accessTokenMatch= window.location.href.match(/access_token=([^&]*)/);
>         const expiresInMatch= window.location.href.match(/expires_in=([^&]*)/);
> 
>         if(accessTokenMatch && expiresInMatch){
>             accessToken= accessTokenMatch[1];
>             const expiresIn= Number(expiresInMatch[1]);
>             // this clears the parameters, allowing us to grab a new access token when it expires.
>             window.setTimeout( () => accessToken = '', expiresIn * 1000);
>             window.history.pushState('Access Token', null, '/');
>             return accessToken;
>         } else {
>             const accessUrl= `https://accounts.spotify.com/authorize?client_id=${clientId}&response_type=token&scope=playlist-modify-public&redirect_uri=${redirectUri}` ;
>             window.location= accessUrl;
>         }
>     }
> };
> 
> export default Spotify;
===============================

I am really appreciate with all your help.

Hello, the comment above comes from the duplicated help request :slight_smile:

@mr.michael2498649820 glad you figured this out on your own :slight_smile:

1 Like

Can you post a screenshot of what you did to solve this problem?
I’m having the same issue but I don’t quite understand what you mean about ‘add return keyword in handler success function to chain another promise’.