ES6 angular-meteor ng-table getData function not called

Question

I'm trying to refactor my code to ES6. I'm using angular-meteor and ng-table. Before refactoring, the data is shown on the table. However, after refactoring to ES6 syntax, the data doesn't show anymore. This is a snippet of the refactored code:

class MyController {
    constructor($scope, $reactive, NgTableParams, MyService) {
        'ngInject';

        $reactive(this).attach($scope);

        this.subscribe('myCollection');

        this.myService = MyService;

        this.helpers({
            items() {
                return this.myService.getItems();
            },
            itemTableParams() {
                const data = this.getReactively('items');

                return new NgTableParams({
                    page: 1,
                    count: 10
                }, {
                    total: data.length,
                    getData: (params) => {
                        // not called
                    }
                });
            }
        });
    }
}

class MyService {
    getItems() {
        return MyCollection.find({}, {
            sort: {
                dateCreated: -1
            }
        });
    }
}

export default angular.module('MyModule', [angularMeteor, ngTable, MyService])
    .component('MyComponent', {
        myTemplate,
        controllerAs: 'ctrl',
        controller: MyController
    })
    .service('MyService', MyService);

The const data is getting populated but getData isn't getting called. The table in the template is using ctrl.itemTableParams as the value for ng-table attribute and its ng-repeat is item in $data.

Does anyone have an idea as to why the getData function isn't called? Help would be greatly appreciated. Thanks!

P.S. When I try to set NgTableParams to a const tableParams, and then call the reload() function, getData is triggered. But the thing is, it's not rendering the data on the table. I set the table as:

itemTableParams() {
    const data = this.getReactively('items');
    const tableParams = new NgTableParams({
        page: 1,
        count: 10
    }, {
        total: data.length,
        getData: (params) => {

        }
    });

    tableParams.reload(); // triggers the getData function
    return tableParams;
}


<table ng-table="ctrl.itemTableParams">
    <tr ng-repeat="item in $data track by $index">
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
        <td>{{item.dateCreated}}</td>
    </tr>
</table>

When I log the data in getData, it has items in it. But, like I said, it's not rendering in the table.

Alexandria

Do you get any errors in the console? Your items method calls this.myService.getItems() but the service has a method getInputs, not getItems. Is this a typo just in the SO question or is it in your actual app too? – Malave

@Malave sorry, that was a typo in the question, not the app. – Alexandria

Answer 1

Apparently, you just need to return the data in getData. The old docs were using $defer.resolve and was not returning the resolved data. The current version (1.0.0) isn't using it anymore.

this.helpers({
  items() {
    return this.myService.getItems();
  },
  itemTableParams() {
    const data = this.getReactively('items');

    return new NgTableParams({
      page: 1,
      count: 10
    }, {
      total: data.length,
      getData: (params) => {
        const filteredData = filterData(data); // do something

        return filteredData;
      }
    });
  }
});

Alexandria

Answer 2

The getData method isn't being called because you fetch the data asynchronously but use it synchronously. So when the controller is loaded initially, getData is called with unresolved data.

To fix this, you'll need to create the NgTableParams in the success callback of the data object:

data.$promise.then((data) => {
 // create NgTableParams here
});

Overman

is this valid for angular-meteor? I tried doing that and $promise is undefined. – Alexandria