Jamming project - save a user Playlist

Hello guys,

in the ‘save a user playlist’ section of the jamming project, steps 89 to 95, I’m getting a strange error from the browser.

Jammig app

this is my code, which has been checked multiple times:

savePlaylist(name, truckUris){
if (!name || !trackUris.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()
).then(jsonResponse => {
const playlistId = jsonResponse.id;
return fetch(https://api.spotify.com/v1/users/${userId}/playlists/${playistId}/tracks,
{
headers: headers,
method: ‘POST’,
body: JSON.stringify({uris: trackUris})
})
})
})
},

Jamming app - error

At this point i’m lost, even after following the youtube tutorial still I get error on ‘fetch’

You’ve included your code inside a blockquote rather than as preformatted text using the </> button. That is preventing a few things like back ticks from showing up. Incidentally, if you can find where you are missing a back tick in your code, you may clear your error. The error message give you a hint of where to start looking for a problem.

Apologies, here is the code.

savePlaylist(name, truckUris){
  if (!name || !trackUris.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()
      ).then(jsonResponse => {
        const playlistId = jsonResponse.id;
        return fetch(`https://api.spotify.com/v1/users/${userId}/playlists/${playistId}/tracks`,
        {
          headers: headers,
          method: 'POST',
          body: JSON.stringify({uris: trackUris})
        })
    })
  })


},

is it correct now?
in this case the error is not helping a lot, the return fetch has all the back ticks…

$ rg --count-matches '`' blah.js 
5

usually they come in pairs.

Thanks to some quick analysis by @ionatan, we know that your code has 5 back ticks in it. Look closely at this line:

return fetch(`https://api.spotify.com/v1/users/${userId}/playlists`,

Notice how in your post everything following the // looks like a comment? If it were included in a string as it appears to be if you only examine that line, it should look like it does here in my post. But it doesn’t. Why would that be? Consider:

const pet = "Riley"

console.log(`I took ${pet} to the vet today. The vet was great.)
console.log(`You should check out her website: https://worldsgreatestfakevetthisisnotreal.com`)

It seems you have a typo in your 2nd fetch url : {playistId} should be {playlistId}.