I'm currently developing an application that interacts with Spotify's API. Here is the outline of what I am aiming to achieve:
- The user inputs an artist, and I retrieve the corresponding Spotify ID.
- Using that ID, I search for related artists.
- I save the top tracks of each of those related artists.
- Then, I compile a playlist consisting of those songs for a specific user.
This process needs to be executed in a specific sequence (known as synchronously). Recently, I came across Promises, which seem to allow chaining functions together to ensure they run in order. However, I'm still unclear on how to implement them effectively.
Here is my attempt at utilizing Promises:
angular.module('smart-spot', [])
.controller('MainCtrl', [
'$scope', '$http',
function($scope, $http)
{
$scope.createPlaylist = function()
{
var artist = $scope.artist;
console.log(artist);
window.open("/login", "Playlist Creation", 'WIDTH=400, HEIGHT=500');
var artistId;
getArtistId(artist)
.then(function(response) //this is where the below error is referring to
{
artistId = response.data;
getRelatedArtists(artistId)
.then(function(response)
{
//The chaining seems to be ineffective here.
}, function(error)
{
return $q.reject(error);
})
}, function(error)
{
return $q.reject(error);
});
};
var getArtistId = function(artist)
{
$http.get('/search', { params:{ artist:artist } })
.then(function(response)
{
console.log(response);
return response;
}, function(error)
{
return $q.reject(error);
});
};
var getRelatedArtists = function(artist)
{
//Retrieve the related artists
}
}
]);
Upon inspecting the console, I encounter an error stating
TypeError: Cannot read property 'then' of undefinedWhat could I be overlooking?