I have two $http queries linked together. The first gets an artist name from a 3rd party API, and then with AngularJS I fill the query URL from the second $http query, that will get cover art from another 3rd party API.
The problem i'm finding, is that when searching for an artist name starting with "THE" (for instance The Smiths), the first API will respond with "Smiths, The", which won't be recognized by the second API as artist name.
Being so, is there some way to act uppon the case that the artist name received ends with ", the", and changing it back before parsing it into the second $http query?
Here's the relevant code:
$scope.getDetails = function (id) {
$http.get('http://api.discogs.com/artists/' + id).
success(function(data) {
$scope.artist = data;
});
$http.get('http://api.discogs.com/artists/' + id + '/releases?page=1&per_page=12').
success(function(data2) {
$scope.releases = data2.releases;
});
$scope.clicked = true;
$scope.sliding = true;
}
}
function ImageCtrl($scope, $http) {
$scope.image = 'img/record-default.png';
$http.get('http://ws.audioscrobbler.com/2.0/?method=album.getinfo&api_key=e8aefa857fc74255570c1ee62b01cdba&artist=' + $scope.artist.name + '&album=' + $scope.release.title + '&format=json').
success(function (data4) {
$scope.image = data4.album.image[2]['#text'];
}
);
};
Copying my comment over to an answer since it appeared have helped.
My suggestion to the problem asked was to watch the data returned from a HTTP request, and then make appropriate adjustments to any data fields, where necessary, in the watch callback.
$scope.$watch(function() {
return $scope.artist;
}, function() {
var pos = $scope.artist.name.toLowerCase().indexOf(', the');
if (pos != -1) {
$scope.artist.name = 'The ' + $scope.artist.name.slice(0, pos);
}
});
If you do find yourself using a lot of sequential, interdependent HTTP requests later on though, I do recommend using promise chaining instead. :-)