Params undefined in ng-table's getData function

Question

I am running into a problem using ng-table where the params that should be passed into my getData function is undefined. I an new to AngularJS and ng-table, so any help would be appreciated. I have verified that the REST calls in the code below work by directly invoking them, so the problem is somewhere in my angular code/configuration.

Anyhow, here is a pseudo-example of my controller. The actual code is on an intranet, so I can't paste it directly, so pardon any typos from transcription. Using ng-table 1.0.0 and angular 1.5.8:

myApp.controller('myCtrl', ['$scope', '$http', 'NgTableParams',
    function($scope, $http, NgTableParams) {
    $http.get('services/data/count').success(function(data) {
        // this works fine
        $scope.totalRows = data.rowCount;
    });
    $scope.tableParams = new NgTableParams({
        page: 1
        count: 20
    }, {
        total: $scope.totalRows,
        getData: function($defer, params) {
            // this line fails with params being undefined
            $http.get('/services/data/' + params.page() + '/' + params.count()) {
            .success(function(data) {
                $scope.data = data;
                $defer.resolve(data);
            });
        }
    });
}]);

And here is the relevant piece of html:

<table ng-table="tableParams" class="table table-condensed table-striped">
    <tr ng-repeat="row in data">
        // row stuff here
    </tr>
</table>

I've inserted console.log statements before the getData http call, and params is printing out as undefined.

Brasilein

I suspect if you console.log your $defer variable, you'll see the object you were expecting params to hold. – Keniakenilworth

Also, $http.success is deprecated. Use then(function(response), function(rejectionReason)) instead. – Keniakenilworth

The $defer does have the values I need. I guess the question from this JS newbie is "why?" But I can move forward now. Many thanks. – Brasilein

Answer 1

Sorry, didn't realize my comment would be confusing. Here's your answer:

The function you put in the getData key is assumed (by the NgTable API) to take just one argument, which represents params. Put another way, the first argument to your getData function always contains params values, even though you named it $defer. And the second argument is always undefined (the API calls it with only a single argument, after all) even though you named it params.

If you want access to $defer (and it seems that you do), I think you should inject it into your controller (add '$defer' to your dependency array at the top, and then add $defer to the argument list of your controller function in the same position.)

It would look like this:

myApp.controller('myCtrl', ['$scope', '$http', '$defer', 'NgTableParams',
    function($scope, $http, $defer, NgTableParams) {
    $http.get('services/data/count').success(function(data) {
        $scope.totalRows = data.rowCount;
    });
    // ...
    getData: function(params) {
        $http.get('/services/data/' + params.page() + '/' + params.count()) {
        .success(function(data) {
            $scope.data = data;
            $defer.resolve(data);
        });
    }

Keniakenilworth

was $defer included in the old ng-table? I also noticed that the old version used lower case n for ngTableParams unlike the current which uses upper case NgTableParams. – Mideast

Answer 2

I also ran into this issue, when I updated my ng-table. Your code should work in versions before 1.0.0 release. 1.0.0-beta.9 is the last version supporting your code.

In the 1.0.0 change notes it says:

getData signature change

The $defer paramater supplied to your getData method has been removed. Instead your getData method should return an array or a promise that resolves to an array.

To migrate

Previously:

var tp = new NgTableParams({}, { getData: getData });

function getData($defer, params){
    // snip
    $defer.resolve(yourDataArray);
}

Now:

var tp = new NgTableParams({}, { getData: getData });

function getData(params){
    // snip
    return yourDataArrayOrPromise;
}

Turmel

Answer 3

The $defer variable (thanks Jesse Amano!) had the values I need. I am not sure why this works, but I can use it.

Brasilein