Angularjs next and previous button?

Question

I am trying to create next and previous button in angular. I am new in programming. I have written a program. If I use custom array $scope.data = [] it works. When I use $http it is not working please help to solve this.

Controller.js

var app=angular.module('myApp', []);

app.controller('MyCtrl', ['$scope', '$http', '$filter', function ($scope, $filter, $http) {
    $scope.currentPage = 0;
    $scope.pageSize = 2;

    $scope.numberOfPages=function(){
        return Math.ceil($scope.pageSize);                
    }
    /*$scope.data = [
    { title: 'Reggae', id: 1 },
    { title: 'Chill', id: 2 },
    { title: 'Dubstep', id: 3 },
    { title: 'Indie', id: 4 },
    { title: 'Rap', id: 5 },
    { title: 'Cowbell', id: 6 }
  ];*/
               $http.get('https://raw.githubusercontent.com/bantic/imdb-data-scraping/master/data/movies.json')
          .then(function(response){
            $scope.data = response.data;
          });

}]);


app.filter('startFrom', function() {
    return function(input, start) {
        start = +start; //parse to int
        return input.slice(start);
    }
});

index.htlm

<div ng-app="myApp" ng-controller="MyCtrl">

    <ul>
        <li ng-repeat="item in data  | startFrom:currentPage*pageSize | limitTo:pageSize">
            {{item.title}}
        </li>
    </ul>
    <button ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1">
        Previous
    </button>
    {{currentPage+1}}/{{numberOfPages()}}
    <button ng-disabled="currentPage >= getData().length/pageSize - 1" ng-click="currentPage=currentPage+1">
        Next
  </button>
</div>

Output

Previous {{currentPage+1}}/{{numberOfPages()}} Next

Answer 1

You had messed up in dependency sequence while injecting & using them in controller factory function. Ensure that the injected dependency should be used in same order as they are injected.

You were injecting '$scope', '$http', '$filter' & using inside controller factory function like function($scope, $filter, $http) { where $filter had instance of $http & $http has instance of $filter .

app.controller('MyCtrl', ['$scope', '$filter','$http', function ($scope, $filter, $http) {

Answer 2

Note that your $http request is returning an object and not an array. You cannot use splice on objects (Like you do in the filter) so that could be an additional cause why this is not working.

Answer 3

Replace this code:

      $http.get('https://raw.githubusercontent.com/bantic/imdb-data-scraping/master/data/movies.json')
      .then(function(response){
        $scope.data = response.data;
      });

with this code, and it should work. Basically, your $http request was returning object, and not an array and you cannot perform splice operation on object. Plus, the response format was different from what you're using in $scope.data :

 $http.get('https://raw.githubusercontent.com/bantic/imdb-data-scraping/master/data/movies.json')
      .then(function(response)
{
  var data = [];
  response.data.forEach(function(movieObj, yearKey)
  {
   var temp = {};
   temp.title = movieObj.title;
   temp.id = movieObj.imdbId;
   data.push(temp);
  });
  $scope.data = data;
});