CODEWITHSUNDEEP
angularjsjsonpagination
user3438917
user3438917

Reputation: 497

Paginating JSON results in AngularJS

I've built an app that uses the moviedb database to query for a list of current movies. I get a JSON object in response, but need to be able to paginate the results and make a request for subsequent pages (e.g., http://api.themoviedb.org/3/movie/now_playing&page=2) where &page={{nextPage}} as a query parameter.

I currently have this as my controller:

app.controller('CustomerController', function($scope, $http, $timeout, $modal, $log) {

$http.get("http://api.themoviedb.org/3/movie/now_playing")
    .success(function(response) {
      console.log(response);
      $scope.page = response.page;
      $scope.results = response.results;
      $scope.currentPage = response.page;
      $scope.pageSize = response.total_pages;
    });

and using this to display results and the pagination UI:

<div ng-app="app">

  <div ng-controller="CustomerController">
    <div class="container">
      <div class="row">
        <div ng-repeat="items in results">
          <a ng-click="open(items)" class="col-lg-3 col-md-3 col-sm-3 col-xs-12 thumbnail">
            <img ng-if="items.poster_path" ng-src="http://image.tmdb.org/t/p/w342/{{items.poster_path}}">
            <div class="caption" ng-hide="items.poster_path">
              <h3>{{items.title}}</h3>
            </div>
          </a>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="container"> Page {{currentPage}} of {{pageSize}}
        <button class="btn btn-default" ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1">Previous</button>
        <button class="btn btn-default" ng-disabled="currentPage >= pageSize - 1" ng-click="currentPage=currentPage+1">Next</button>
      </div>
    </div>
  </div>

How can I create the function to make subsequent API calls to pull in the next or previous page results? I assume it should be setting a dynamic parameter from the pagination button and appending it to the end of the API call URL, but not sure how to implement this.

Upvotes: 1

Views: 2920

Answers (1)

Muli Yulzary
Muli Yulzary

Reputation: 2569

You are really close. All you have to do is send the additional params.

var currentPage = 0;
$http.get("http://api.themoviedb.org/3/movie/now_playing", {
 params: {
  page: currentPage //will be encoded as &page={{currentPage}}
 }
})
 //Use of .success() is deprecated
 .then(function(response) {
   console.log(response);
   $scope.page = response.data.page;
   if(currentPage + 1 < response.data.total_pages)
    currentPage++;
   $scope.results = response.data.results;
   $scope.pageSize = response.data.total_pages;
 });

Working fiddle with github api

angular.module('myApp', [])
  .controller('myCtrl', function($scope, $http) {
    $scope.page = 0;
    $scope.limit = 3;
  
    var total = -1;
    $scope.total = 0;
  
    function loadPage(page) {
      if(total === -1 || $scope.page * $scope.limit < total && total > 0)
      $http.get('https://api.github.com/search/code', {
        params: {
          q: 'addClass user:mozilla',
          page: page,
          per_page: $scope.limit
        }
      }).then(function(response) {
        $scope.total = total = response.data.total_count;
        $scope.results = response.data.items;
      });
    }

    loadPage(0);

    $scope.prev = function() { 
     if($scope.page - 1 >= 0)
      loadPage(--$scope.page);
    };
    $scope.next = function() { loadPage(++$scope.page) };
  });
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="myCtrl">
    <div ng-repeat="result in results">
      Name: {{result.name}} <br>
      Repo id: {{result.repository.id}}
      <hr>
    </div>
    <button ng-click="prev()">prev</button>
    <span>{{page}}</span>
    <button ng-click="next()">next</button> <br>
    <span>total: {{total/limit}}</span>
  </div>
</div>

EDIT: Working fiddle with themoviedb api

Upvotes: 2

Related Questions