CODEWITHSUNDEEP
angularjscoffeescriptngtable
map7
map7

Reputation: 5126

ng-table TypeError: undefined is not a function

I'm using an old version of ng-tables 0.4.2 and if I upgrade to 0.4.3 it displays the error in my chromium console

TypeError: undefined is not a function
    at reload (http://localhost:3000/assets/ng-table/ng-table.min.js?body=1:140:160)
    at Object.fn (http://localhost:3000/assets/ng-table/ng-table.min.js?body=1:196:24)
    at Scope.$digest (http://localhost:3000/assets/angular/angular.js?body=1:5226:31)
    at Scope.$apply (http://localhost:3000/assets/angular/angular.js?body=1:5305:28)
    at done (http://localhost:3000/assets/angular/angular.js?body=1:3182:26)
    at completeRequest (http://localhost:3000/assets/angular/angular.js?body=1:3306:9)
    at XMLHttpRequest.xhr.onreadystatechange (http://localhost:3000/assets/angular/angular.js?body=1:3279:13)

Here is how I've configured my tableParams

  page = $location.search()['page'] # Get page from the URL

  # data is created by ngTableParams
  $scope.tableParams = new ngTableParams({
    page: if page then page else 1,
    count: 10,
    sorting: { invoice_no: 'desc'}
  }, {
    total: 0,
    filterDelay: 500,

    # ng-table will ask for updated data, this is where it gets it from.
    getData: ($defer, params) ->
      # Go get a list of debtors
      Invoice.query params.url(), (data) ->
        params.total($scope.total)
        $location.search(params.url()) # Params into URL
        orderedData = (if params.sorting then $filter('orderBy')(data, params.orderBy()) else data) # Sort
        $defer.resolve(orderedData) # Paginate / update table with new data
  })

I do include ng-tables in my module and ngTableParams in my controller.

Update: Passing mock data works

If I do the following there is no error.

# ng-table will ask for updated data, this is where it gets it from.
getData: ($defer, params) ->
  $defer.resolve([{invoice_no: 1}])

Update: Using Restangular instead of angular-resource works

So doing my query using Restangular works

getData: ($defer, params) ->
  Restangular.all('invoices').getList()
  .then((data) ->
    return data
  )

Maybe in ng-table 0.4.3 and above I can no longer use angular-resource? or I'm just doing it wrong. Here is my invoice resource (which was working in ng-table 0.4.2).

Invoice = ['$resource', 'apiPrefix', ($resource, apiPrefix) ->
  $resource( apiPrefix + "/invoices/:id",
    id: "@id"
  ,
    # Add update method
    update: {method: "PUT"}
  )
]

angular
  .module('paisApp')
  .factory('Invoice', Invoice)

Upvotes: 1

Views: 1841

Answers (3)

Mauro S
Mauro S

Reputation: 1

Initialize first, it works!

.controller('indexDataCtrl', function($scope, $q, NgTableParams) {

$scope.dataTable = new NgTableParams();

....

}

Upvotes: 0

map7
map7

Reputation: 5126

I found that the Invoice resource was returning a type which ng-tables doesn't like. ng-tables version 0.4.3 expects a $defer object to be returned, so I had to wrap my query in a defer.resolve. Now it works.

  $defer.resolve(
    Invoice.query params.url(), (data) ->
      orderedData = (if params.sorting then $filter('orderBy')(data, params.orderBy()) else data) # Sort
      return orderedData
  )

Upvotes: 1

apxp
apxp

Reputation: 5884

I found the answer here: https://github.com/esvit/ng-table at number 3.

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.

getData: ($defer, params) ->

Because of that change your params var is undefined.

To migrate your function that should work:

getData: (params) ->
  # Go get a list of debtors
  Invoice.query params.url(), (data) ->
    params.total($scope.total)
    $location.search(params.url()) # Params into URL
    orderedData = (if params.sorting then $filter('orderBy')(data, params.orderBy()) else data) # Sort
    orderedData

Upvotes: 1

Related Questions