Loading JSON via AJAX with NgTable parameters

Question

I'm trying to use ngTables to sort and filter data using an AJAX call. Currently I am able to replicate the data with an ng-repeat, but none of my sorting functions apply. I referenced this example http://plnkr.co/edit/zuzcma?p=info and was able to get it to work using a mock.js file, but right now I'm using a file that I loaded onto my webserver and I can't seem to get it to work.

I'm sure the answer is fairly simple and appreciate any help. I've attached my markup to show you what my controller and html file look like. Thank you all and let me know if you need anymore information!

Here are some links to the API I am referencing.

http://bazalt-cms.com/ng-table/

http://bazalt-cms.com/ng-table/example/6

HTML:

<div ng-controller="myController">
  <table ng-table="tableParams" show-filter="true" class="table table-condensed">
    <tr ng-repeat="user in data">
      <td data-title="foo" sortable="foo">{{user.foo}}</td>
      <td data-title="bar" sortable="bar">{{user.bar}}</td>
    </tr>
  </table>
</div>

Controller:

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

app.controller('myController', function($scope, $http, $filter, ngTableParams) {

 $http.get('http://jsondata.com/myjson.json')
  .success(function(data, status) {
    $scope.data = data;
  });

$scope.tableParams = new ngTableParams({
    page: 1,            // show first page
    count: 10,          // count per page
    sorting: {
        foo: 'asc'     // initial sorting
    }
}, {
    total: data.length, // length of data
    getData: function($defer, params) {
        // use build-in angular filter
        var orderedData = params.sorting() ?
                            $filter('orderBy')(data, params.orderBy()) :
                            data;

        $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
    }
  });
});

Bogey

Answer 1

you problem is that you use the local variable data inside your ngTableParams and in the same time you are outside the scope of the success function.

Change your code on something like this:

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

app.controller('myController', function($scope, $http, $filter, ngTableParams) {

 $http.get('http://jsondata.com/myjson.json')
  .success(function(data, status) {
    $scope.data = data;

    $scope.tableParams = new ngTableParams({
        page: 1,            // show first page
        count: 10,          // count per page
        sorting: {
            foo: 'asc'     // initial sorting
        }
    }, {
        total: $scope.data.length, // length of data
        getData: function($defer, params) {
            // use build-in angular filter
            var orderedData = params.sorting() ?
                                $filter('orderBy')($scope.data, params.orderBy()) :
                                $scope.data;

            $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
        }
      });
  });


});

See the change from data to $scope.data inside ngTableParams.

Hint: If you just place your ngTableParams inside your success function, is going to work too, without changing data to $scope.data. But, changing the variables will give you a better flexibility if you want to reload() your table.

Multidisciplinary

I follow same but console showing error : orderedData.slice is not a function why is that ? – Slaveholder

Hi @Slaveholder - it is because you are returning object not array, in js array has slice function. Here you want to convert your json object into arr first. – Onomasiology

Answer 2

$defer need to be resolved within the getData, after the ajax call is completed. As in the example You provided, the ajax call is inside the getData:

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

app.controller('myController', function($scope, $http, $filter, ngTableParams) {

$scope.tableParams = new ngTableParams({
    page: 1,            // show first page
    count: 10,          // count per page
    sorting: {
        foo: 'asc'     // initial sorting
    }
}, {
    total: data.length, // length of data
    getData: function($defer, params) {
        $http.get('http://jsondata.com/myjson.json')
           .success(function(data, status) {

               // use build-in angular filter
               var orderedData = params.sorting() ?
                   $filter('orderBy')(data, params.orderBy()) :
                   data;

               $defer.resolve(orderedData.slice((params.page() - 1) * params.count(),  params.page() * params.count()));
            });
        }
    });
});

Kriskrischer

Your getData function will be called every time someone is doing a change on the ordering, this means that you will do an ajax call for new data in every sorting. I think this is not efficient. – Multidisciplinary

Hi @Kriskrischer - it works fine for me, but it call server each and every time to get table data if we want to sort any column. Is there ant way to get server data once and process on client side whatever we want? – Onomasiology

Answer 3

First step is to put quotes around your sortable attribute:

  <td data-title="foo" sortable="'foo'">{{user.foo}}</td>

ngTable expects an expression there.

Second step is to check which version of ngTable you're using, and if it's 0.3.2 check out this ngTable issue: https://github.com/esvit/ng-table/issues/204

Good luck)

Gilliangilliard

Answer 4

<tr ng-repeat="user in $data">
      <td data-title="foo" sortable="foo">{{user.foo}}</td>
      <td data-title="bar" sortable="bar">{{user.bar}}</td>
</tr>

You can directly refer data in your js no need to $scope.data = data. I tried and worked fine for me.

Judaica