【问题标题】:Why is my playlist ID undefined when my app tries to save a playlist to my Spotify account?当我的应用尝试将播放列表保存到我的 Spotify 帐户时,为什么我的播放列表 ID 未定义?
【发布时间】:2020-04-12 22:40:44
【问题描述】:

我正在使用Codecademy Jammming project,并且我已经让一切正常工作,除了我无法将我的播放列表保存到我的 Spotify 帐户。当我尝试运行以下代码时,由于某种原因,我收到一个错误,它告诉我 playlistId 未定义。

let accessToken;

const Spotify = {
  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;
    }
  },

  search(term) {
    const accessToken = Spotify.getAccessToken();
    return fetch(`https://api.spotify.com/v1/search?type=track&q=${term}`, {
      headers: {Authorization: `Bearer ${accessToken}`}
    }).then(response => {
      return response.json();
    }).then(jsonResponse => {
      if (!jsonResponse.tracks) {
        return [];
      }
      return jsonResponse.tracks.items.map(track => ({
        id: track.id,
        name: track.name,
        artist: track.artists[0].name,
        album: track.album.name,
        uri: track.uri
      }));
    });
  },

  savePlaylist(name, trackUris) {
    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://cors-anywhere.herokuapp.com/http://api.spotify.com/v1/users/${userId}/playlists`,
        {
          headers: headers,
          method: 'POST',
          body: JSON.stringify({name: name})
      }).then(response => response.json()
      ).then(jsonResponse => {
        console.log(jsonResponse);
        const playlistId = jsonResponse.id;
        return fetch(`https://api.spotify.com/v1/playlists/${playlistId}/tracks`, {
          headers: headers,
          method: 'POST',
          body: JSON.stringify({uris: trackUris})
      });
    });
  });
  }
};

我已尝试将 jsonResponse 记录到控制台,但没有看到 id 属性 (screenshot)。有人知道为什么会这样吗?我将我的代码与用于他们网站版本的代码进行了比较,它看起来几乎相同。任何帮助将不胜感激。

【问题讨论】:

  • 您的 Spotify 帐户下有播放列表吗?

标签: javascript spotify jsonresponse


【解决方案1】:

根据您的代码 sn-p,您似乎正在调用错误的端点来创建播放列表

return fetch('https://cors-anywhere.herokuapp.com/http://api.spotify.com/v1/users/${userId}/playlists'

也许可以根据documentation 尝试以下操作。

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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2023-03-11
    • 2016-09-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多