prp101 prp101 - 6 months ago 75
AngularJS Question

AngularJS Load more function

So I am trying to make load more function.I am fetching data from twitch API and it comes as array of objects.

$scope.loadData = function () {

$http.get("https://api.twitch.tv/kraken/streams?limit=9&offset=" + $scope.x).then(function(response) {
$scope.myName = response.data.streams;
$scope.link="http://player.twitch.tv/?channel=";
return $scope.x=$scope.x + 9; }); };
//initial load
$scope.loadData();


$scope.myName is array in which data is stored and it is used in ng-repeat.

$scope.x is variable used for offset and after clicking button it is incremented and is used to fetch new streams.So when I click button it removes old 9 streams and loads new 9 streams.I want to keep my old 9 streams and to just add 9 more everytime button is clicked.
See here: https://plnkr.co/edit/TbOf9hkPILJn2snW8D7A Thanks.

Answer

If I understood problem well, you should just append your data array instead of replacing it:

$scope.myName = [];
$scope.loadData = function () {

 $http.get("https://api.twitch.tv/kraken/streams?limit=9&offset=" + $scope.x).then(function(response) {
    // add streams to existing array
    Array.prototype.push.apply($scope.myName, response.data.streams);

    $scope.link="http://player.twitch.tv/?channel=";
     return $scope.x=$scope.x + 9; });  }; 
    //initial load
    $scope.loadData();