$http.get to synchronous AngularJS

Question

Can you help me please im new in angularJS,

i have a problem with Asynchrounous $http.get , i explain : i got data that i show in ngTable but in my html i got a empty table until i click to filter or to sort then i see my data.

i think its because i have a promise in my http.get. here my code to understand more ( sorry for my english)

'use strict';
(function() {
    angular
        .module('timeShareApp')
        .controller('homeController', homeController);


    function homeController($http, $scope, $filter, NgTableParams) {

    $scope.users =[];

$http.get('/api/users/').success(function(response) {
            $scope.users = response;

        });

       $scope.usersTable = new NgTableParams({
                page: 1,
                count: 10
            }, {
                total: $scope.users.length, 
                getData: function ($defer, params) {
                      $scope.data = params.sorting() ? $filter('orderBy')($scope.users, params.orderBy()) : $scope.users;
                       $scope.data = params.filter() ? $filter('filter')($scope.data, params.filter()) : $scope.data;
                       $scope.data = $scope.data.slice((params.page() - 1) * params.count(), params.page() * params.count());
                       $defer.resolve($scope.data);
                }
            });





 }

   homeController.$inject = ["$http", "$scope", "$filter", "NgTableParams"];

})();

for info : code works perfectly except that promise that i want to convert to synchonous if you can help me please.

Thank you in advance

Can you try `$scope.users.concat.apply($scope.users, response);` instead of `$scope.users = response;`? — dfsq, Mar 15 '16 at 23:01
another good solution is to load the data in a service and inject that service into your controller http://stackoverflow.com/questions/15161537/angularjs-load-data-from-service — Meiko Rachimow, Mar 15 '16 at 23:04
i will note that, i changed machine ( home machine to work machine (in job) and it works without changing anything) but thank you so much for your support. i note that for next data loading — AmenzO, Mar 16 '16 at 09:44

score 2 · Answer 1 · answered Mar 15 '16 at 23:01

2

I think there is no problema on adding $scope.usersTable to me defined inside your promise resolve method. Have you tried that?

answered Mar 15 '16 at 23:01

Rafael Grillo

232
2
8

Andreas Jägle · Accepted Answer · 2016-03-15T23:34:47.893

In most cases, there is no reason to keep any data outside the ng-table's scope. My advice is to not modify or reference any scope variables because this can cause some pretty hard to track timing issues.

Have a look at the really good ng-table docs, which mostly have a working sample for your use case. See the docs here

Depending on the place where your filtering / sorting happens, you need to adapt this, but the following should basically work:

$scope.loadData = function() { return $http.get('/api/users/') };

$scope.usersTable = new NgTableParams(
  {
    page: 1,
    count: 10
  }, {
    total: 0, // just the inital value - will be updated later on
    getData: function ($defer, params) {
      $scope.loadData().success(function (result) {
        // assuming your result has a total and a data field...

        // update the table params with the total amount of results
        // could also be result.length...
        params.total(result.total);

        // sort and filter your data using the params object here
        var data = result.data;

        // give back the control to the table
        $defer.resolve(data);
      });
    }
  }
);

Please be aware to also set the params.total whenever your server responds. Otherwise the pagination will not be visible.

Thank you so much for your support, i just changed machine and now my code works perfectly but i note that for next devs Thank you so much — AmenzO, Mar 16 '16 at 09:46
@AmenzO, can you then mark ajaegle 's answer as the accepted answer? That's the way it works on stackoverflow :). — Bart, Mar 18 '16 at 07:52
Thank you bart for advice, last day i read comment iwant make it answered but i did not found the ajaeagle under up-down buttons :) Thank you again :) — AmenzO, Mar 18 '16 at 10:08

$http.get to synchronous AngularJS

2 Answers2