CODEWITHSUNDEEP
jsonangularjsngtable
skool99
skool99

Reputation: 830

ng-table grouping does not work when exactly same data is assigned using rest service output

I am facing an interesting issue. The ng-table groups works correctly when the input data is hardcoded which is same as data which comes from rest service json.
Below hardcoded json works :

var data = [{name: "Moroni", age: 50, role: 'Administrator'},
            {name: "Tiancum", age: 43, role: 'Administrator'},
            {name: "Jacob", age: 27, role: 'Administrator'},
            {name: "Nephi", age: 29, role: 'Moderator'},
            {name: "Enos", age: 34, role: 'User'},
            {name: "Tiancum", age: 43, role: 'User'},              
            {name: "Enos", age: 34, role: 'User'}];


This does not work

 var data = response;

I debugged response and it is exactly same as my hardcoded json data. I am unable to figure out what is the issue.

I have seen ng-table documentation and followed the same. My html and js code is similar to - http://bazalt-cms.com/ng-table/example/13

My code is exactly similar to above example 13 link. Just I am calling a service and getting similar data. (Plunker link - http://plnkr.co/edit/becd3D)

I am still facing same issue. Can anyone please help.

Please help. Thanks

Upvotes: 0

Views: 1119

Answers (2)

sylwester
sylwester

Reputation: 16498

Please see here http://plnkr.co/edit/fsNx1h?p=preview

just move your $scope.tableParams into call back function after you get data from server.

 $http.get('data.json').then(function(response){
   var data = response.data
    $scope.tableParams = new ngTableParams({
        page: 1,            // show first page
        count: 10          // count per page
    }, {
        groupBy: function(item) {
            return 'First letter "' + item.name[0] + '"';
        },
        total: data.length,
        getData: function($defer, params) {

            var orderedData = params.sorting() ?
                    $filter('orderBy')(data, $scope.tableParams.orderBy()) :
                    data;

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

    });
})

Upvotes: 1

Goodzilla
Goodzilla

Reputation: 1483

I'll try avoiding the "link only"-type of answer, but this is so contrived, I find it hard to understand myself, let alone explain it.

The example given on the website is not using any sort of callback, don't know if it is a mistake or not.

Here's how I proceeded :

  • There's an example on the website showing AJAX loading into ngTable.
  • There's another example showing how to group the data.

I mixed them together. Here's a working demo.

From what I understand, the whole getData function needs to get everything together, either asynchronously or hardcoded. So you'll have to pass it the data, but some configuration parameters aswell :

getData: function($defer, params) {

    // ajax request to api
    Api.get(params.url(), function(data) {
        $timeout(function() {

            // update table params
            params.total(data.total);

            // set new data
            $defer.resolve(data.result);

        }, 500);
    });
}

Upvotes: 0

Related Questions