1

I need to wait until I have a response from the $http get request. Here is my code:

var app = angular.module('prova', ['ui.bootstrap']);

app.controller('MainCtrl', function($scope, $http) {

$scope.currentPage = 1;
$scope.itemsPerPage = 5;
$scope.maxSize = 5;
$scope.tickets = [];

$http({method: 'GET', url: 'getNews.json'}).
success(function(data, status, headers, config) {

    $scope.tickets = data;
}).
error(function(data, status, headers, config) {
    // called asynchronously if an error occurs
    // or server returns response with an error status.
});

for (var i = 0; i < 78; i++) {
    $scope.tickets.push('ticket ' + i);
}
$scope.noOfPages = $scope.tickets.length / $scope.itemsPerPage;

$scope.$watch('currentPage', function() {
    var begin = ($scope.currentPage - 1) * $scope.itemsPerPage;
    var end = begin + $scope.itemsPerPage;

    $scope.paged = {
        tickets: $scope.tickets.slice(begin, end)
    }
   });
});

View:

<!DOCTYPE html>
<html ng-app="plunker">

<head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <link data-require="bootstrap-css@3.0.3" data-semver="3.0.3" rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
    <script data-require="angular.js@*" data-semver="1.2.12" src="http://code.angularjs.org/1.2.12/angular.js"></script>
    <script data-require="angular-ui-bootstrap@0.11.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.min.js"></script>
    <script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script data-require="bootstrap@3.0.2" data-semver="3.0.2" src="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
    <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">

    <div>{{noOfPages}} &nbsp; {{currentPage}} &nbsp; {{maxSize}}
        <pagination ng-model="currentPage" total-items="tickets.length" items-per-page="5"></pagination>
    </div>
    <div class="alert alert-info" ng-repeat="tic in paged.tickets">
        {{tic}}
    </div>

</body>

</html>
08Dc91wk
  • 4,254
  • 8
  • 34
  • 67
FabioEnne
  • 732
  • 1
  • 14
  • 43
  • just put needed code in success handler – Grundy Jul 16 '15 at 10:04
  • Are you using ng-repeat in your view? If you are, it will automatically handle populate when $scope.tickets receives the data. To make your pagination work, use a filter instead. Then you don't need the additional watch. Check my answer [here](http://stackoverflow.com/questions/31172426/connecting-angular-bootstrap-ui-paginate-to-table/31182565#31182565). – jme11 Jul 16 '15 at 10:05
  • @jme11 thanks for the answer..I'll check it out, in the meantime I edited my question with my view.. – FabioEnne Jul 16 '15 at 10:11
  • @jme11 anyway the problem is that in some way I have to whait for the response from the AJAX call.. – FabioEnne Jul 16 '15 at 10:12
  • as @RoshanMathews said in his answer, just put the code that need to wait for the response in the .success function of you $http call. – Okazari Jul 16 '15 at 10:15
  • You can do as others have suggested here putting the pagination code inside the success. BUT I just wanted you to know that with ng-repeat and a filter -- you don't have to worry about "waiting" for your response. ngRepeat will handle the update when the data exists and the filter is only applied when the repeat is run on each digest. – jme11 Jul 16 '15 at 10:19

1 Answers1

1

Angular's $http will return a promise, you can add your code to the success method. To reuse the example from the $http documentation: 

// Simple GET request example :
$http.get('/someUrl').
  success(function(data, status, headers, config) {
    // this callback will be called asynchronously
    // when the response is available
  }).
  error(function(data, status, headers, config) {
    // called asynchronously if an error occurs
    // or server returns response with an error status.
  });

EDIT:

Looks like the following code:

for (var i = 0; i < 78; i++) {
    $scope.tickets.push('ticket ' + i);
}
$scope.noOfPages = $scope.tickets.length / $scope.itemsPerPage;

$scope.$watch('currentPage', function() {
    var begin = ($scope.currentPage - 1) * $scope.itemsPerPage;
    var end = begin + $scope.itemsPerPage;

    $scope.paged = {
        tickets: $scope.tickets.slice(begin, end)
    }
});

should be moved into the .success block. Hope that helps.

Roshan Mathews
  • 5,788
  • 2
  • 26
  • 36