In my code, I have a function that makes an initial $http call and displays the results. Following this function, there is another function that will make additional calls when the scroll event is triggered (using the ng-Infinite-Scroll module).
The issue I am facing is that I can't seem to append the results from these subsequent calls to the initial results displayed by the default call.
Below is a snippet of my code:
// Initial call
$scope.getDetails = function (id) {
// First call
$http.get('http://api.discogs.com/artists/' + id).
success(function(data) {
$scope.artist = data;
});
// Second call
$http.get('http://api.discogs.com/artists/' + id + '/releases?page=1&per_page=12').
success(function(data2) {
$scope.releases = data2.releases;
});
// Watching for changes in artist name
$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);
}
});
// Loading details
var _page = 1;
$scope.releases = [];
$scope.loadDetails = function() {
_page++;
console.log(_page);
$http.get('http://api.discogs.com/artists/' + id + '/releases?page=' + _page + '&per_page=12').then(function(data2) {
$scope.releases = data2.releases;
});
};
$scope.clicked = true;
$scope.sliding = true;
}
After the initial call, the following function is triggered to fetch the first page with 12 items:
$http.get('http://api.discogs.com/artists/' + id + '/releases?page=1&per_page=12').
success(function(data2) {
$scope.releases = data2.releases;
});
However, when the loadDetails function is executed to fetch subsequent pages, the new results replace the existing ones instead of being appended. How can I correctly append the results instead of overwriting them?
If you have any hints or suggestions, please let me know!
Here's a working Plunker.