ngTable with data from web api not working

Question

I'm using ngTable for AngularJS and geting the data from a web api. The problem start when I tried to use the filters in the table.

If I do it this way, the table is filled with the data, but the filters don't works:

$scope.clientesTable = new NgTableParams({
            page: 1,
            count: 10
        }, {
                getData: function (params) {
                    var clientes = clientesService.getAll(baseUrl);
                    clientes.then(function (data) {
                        $scope.clientesTableData = data.data;
                    }, function (error) {
                        console.log("Error: " + error);
                    });
                }

            });

In the documentation the code is something like this:

$scope.clientesTable = new NgTableParams({
                page: 1,
                count: 10
            }, {
                    getData: function (params) {
                        var clientes = clientesService.getAll(baseUrl);
                        clientes.then(function (data) {
                              params.total(data.inlineCount);
                              return data.results;
                        }, function (error) {
                            console.log("Error: " + error);
                        });
                    }

                });

Doing it this way, I don't see the data in the frontend. If a look for data in clientesTable:

EDIT: Response from web api:

Can you add a console.log after clientes.then(function (data) { ... — ESP32
– ESP32, Commented Oct 20, 2018 at 20:14
yes, do you receive any data from your service. Is the structure data.data? — ESP32
– ESP32, Commented Oct 20, 2018 at 21:29
yes, the data is okey. If i asigne data.data to a var in $scope, then i can see it in the front end. The problem is when i use return data.data just like it is in the documentation. — Guido Caffa
– Guido Caffa, Commented Oct 20, 2018 at 21:56
@GuidoCaffa Probably you have to write a return statement before clientes.then() — Srinivas Paila
– Srinivas Paila, Commented Oct 21, 2018 at 5:11

Srinivas Paila · Accepted Answer · 2018-10-21 05:20:19Z

1

You have to provide return keyword before clientes.then() inside getData method.

answered Oct 21, 2018 at 5:20

Srinivas Paila

8176 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ESP32 · Accepted Answer · 2018-10-22 07:58:27Z

0

If I look at this answer https://stackoverflow.com/a/29629034/3177115 I see that NgTableParams is used differently. You need to use it with a promise which returns the data back into the NgTableParams object.

$scope.tableParams = new ngTableParams({
            page: 1, count: 5,
        }, {
            getData: function ($defer, params) {
                $http.get(testUrl, { params: params })
                     .then(function(res) {
                        $defer.resolve(res.data.items);
                    }, function(reason) {
                        $defer.reject();
                    }
                );
            },
        });

Please see the full example for details, I have simplified the example a bit for better understanding.

EDIT:

I think the API of ng-tables has changed - it does not expect a deferer any more. Looking now at your first code example again (which you say it works) I see why the filter is not working: You do not pass the filter information back to your service.

The ng-table docs say: http://ng-table.com/#/filtering/demo-filtering-basic

Got a getData function? In this case you'll need to apply the values from NgTableParams.filters() to the data you want to display in your table. This is typically the case when the data is being fetched from the server

I don't know your service, but can you add the filter params to the service call?

var clientes = clientesService.getAll(baseUrl, params._params)

Btw: the docs of ng-table are a nightmare - all samples inherit from each other and use directives and injects.

edited Oct 22, 2018 at 7:58

answered Oct 21, 2018 at 16:48

ESP32

8,7732 gold badges46 silver badges71 bronze badges

1 Comment

Guido Caffa Over a year ago

Doing it that way i have this error: TypeError: "params is undefined". I can't find why I have this error, I was using parameters in the code and I wasn't having this problem.

Collectives™ on Stack Overflow

ngTable with data from web api not working

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related