Search code examples
ng-tags-input

Error using ngTagInput : TypeError: a.filter is not a function


I am trying to use ngTagInput with autocomplete but getting following Error:

angular.min.js:117 TypeError: a.filter is not a function
at d (ng-tags-input.min.js:1)
at ng-tags-input.min.js:1
at angular.min.js:130
at n.$eval (angular.min.js:144)
at n.$digest (angular.min.js:142)
at n.$apply (angular.min.js:145)
at l (angular.min.js:97)
at H (angular.min.js:101)
at XMLHttpRequest.u.onload (angular.min.js:102)

HTML

<tags-input ng-model="selectedList">
  <auto-complete source="getData($query)"></auto-complete>
</tags-input>

Javascript

$scope.getData = function(query) { 
  var request = {
    // GET request is defined here
  };

  return $http(request).success(function(response, status) {
    var defer = $q.defer();
    defer.resolve([
      { 'text': 'just' },
      { 'text': 'some' },
      { 'text': 'cool' },
      { 'text': 'tags' }
    ]);
    return defer.promise;
  });
};

Plunker


Solution

  • You're using the success method, that isn't chainable, i.e. it ignores return values, so the getData function is, in fact, returning the $http promise directly, which according to your Plunker, happens to resolve into an undetermined value, hence the filter is not a function error, since the autoComplete directive expects an array.

    You should use then instead of success (you also don't need to create a new promise in order to return a value from inside another promise):

    $scope.getData = function(query) { 
      ...
      return $http(request).then(function(response, status) {
        return [
          { 'text': 'just' },
          { 'text': 'some' },
          { 'text': 'cool' },
          { 'text': 'tags' }
       ];
      });
    }
    

    Updated Plunker

    That'll work, but it doesn't make much sense because it issues a request and then discards its response. If you don't need to handle the response, you can simply return the http promise directly (assuming the response structure is valid for the directive):

    $scope.getData = function(query) { 
      ...
      return $http(request);
    };
    

    Finally, both success and error methods have been deprecated. You should always use then instead.