CODEWITHSUNDEEP
javascriptreactjsspotify
Shakthi
Shakthi

Reputation: 31

The Spotify Web API returns null items for user playlist even when the user has got some playlists

I used React for this and here is my App.js

import React, { useEffect } from "react";
import './App.css';
import { useDataLayerValue } from "./DataLayer";
import { getTokenFromResponse } from "./spotify";

import Login from "./Login";
import Player from "./Player";

import SpotifyWebApi from "spotify-web-api-js";

const spotify = new SpotifyWebApi();

function App() {
  const [{ token }, dispatch] = useDataLayerValue();

  useEffect(() => {
    const hash = getTokenFromResponse();
    window.location.hash = "";
    let _token = hash.access_token;

    console.log(_token)
    if (_token) {
      spotify.setAccessToken(_token);
      dispatch({
        type: "SET_TOKEN",
        token: _token,
      });

      spotify.getMe().then((user) => {
        console.log(user)
        dispatch({
          type: "SET_USER",
          user: user,
        });
      });

      spotify.getUserPlaylists().then((playlists) => {
        console.log(playlists)
        dispatch({
          type: "SET_PLAYLISTS",
          playlists: playlists,
        })
      })
    }
  }, [])

  return (
    <div className="app">
      {token ? <Player spotify={spotify} /> : <Login />}
    </div>
  );
}

export default App;

My spotify.js file

export const authEndPoint = "https://accounts.spotify.com/authorize"

const redirectUrl = "http://localhost:3000/"

const clientID = "My_client_ID"

const scopes = [
    "user-read-currently-playing",
    "user-read-recently-played",
    "user-read-playback-state",
    "user-top-read",
    "user-modify-playback-state",
]

export const getTokenFromResponse = () => {
    return window.location.hash
        .substring(1)
        .split("&")
        .reduce((initial, item) => {
            var parts = item.split("=");
            initial[parts[0]] = decodeURIComponent(parts[1]);

            return initial;
        }, {});
};

export const loginUrl = `${authEndPoint}?client_id=${clientID}&redirect_uri=${redirectUrl}&scope=${scopes.join("%20")}&response_type=token&show_dialog=true`

When I run the server the response I get is

{href: "https://api.spotify.com/v1/users/syq0nm9vazzq9oddoozq2z5d3/playlists?offset=0&limit=20", items: Array(0), limit: 20, next: null, offset: 0, …}
href: "https://api.spotify.com/v1/users/syq0nm9vazzq9oddoozq2z5d3/playlists?offset=0&limit=20"
items: []
limit: 20
next: null
offset: 0
previous: null
total: 0
__proto__: Object

This is what is shown in my console but I have got 2 playlists in my spotify account. I am creating this with the help of a tutorial. I am currently a learner. It worked perfectly fine in the tutorial. IS there bugs in my code??

Someone please help me I have spent 3 days looking for suggestions.

Upvotes: 3

Views: 1629

Answers (3)

Marcus Castanho
Marcus Castanho

Reputation: 143

I've just experienced this problem.You must also include in the authorization scopes array the 'read' ones: playlist-read-collaborative and playlist-read-private, as it is stated in both sections of the docs that the Get Current User's Playlists endpoint requires these two authorization scopes. Still, I am not sure that 200 is the right answer/status code coming from the API when the client has no authorization and the answer for this case is either some data or none.

Your 'My spotify.js' file should look something like this:

export const authEndPoint = "https://accounts.spotify.com/authorize"

const redirectUrl = "http://localhost:3000/"

const clientID = "My_client_ID"

const scopes = [
    "user-read-currently-playing",
    "user-read-recently-played",
    "user-read-playback-state",
    "user-top-read",
    "user-modify-playback-state",
    "playlist-read-collaborative",
    "playlist-read-private"
]
...

Upvotes: 0

Nahshon10 Kampamba
Nahshon10 Kampamba

Reputation: 71

I had the same problem. The issue for me was that the playlists I had weren't added to my profile. So what I did was: on my playlists in Spotify I clicked on the '...' and then from the options I clicked on "add to profile". After the playlists were added to my profile, I was able to display them in my app.

Upvotes: 6

Crook
Crook

Reputation: 21

All you have to do is to go into your App.js file, look in the spotify.getUserPlaylists(userId) and add your spotify user ID and I think it will run.

Upvotes: 2

Related Questions