CODEWITHSUNDEEP
jsonangularjsangular-filters
gerl
gerl

Reputation: 1181

Unknown provider: inputProvider when using $filter

I've taken the orderByObject Filter from this post. But I keep getting this error: 

Error: [$injector:unpr] Unknown provider: inputProvider <- input <- orderObjectByFilter
http://errors.angularjs.org/1.3.17/$injector/unpr?p0=inputProvider%20%3C-%20input%20%3C-%20orderObjectByFilter
minErr/<@http://localhost:3000/bower_components/angular/angular.js:63:12
createInjector/providerCache.$injector<@http://localhost:3000/bower_components/angular/angular.js:4031:19
getService@http://localhost:3000/bower_components/angular/angular.js:4178:39
createInjector/instanceCache.$injector<@http://localhost:3000/bower_components/angular/angular.js:4036:28
getService@http://localhost:3000/bower_components/angular/angular.js:4178:39
invoke@http://localhost:3000/bower_components/angular/angular.js:4210:1
enforcedReturnValue@http://localhost:3000/bower_components/angular/angular.js:4072:20
invoke@http://localhost:3000/bower_components/angular/angular.js:4219:14
createInjector/instanceCache.$injector<@http://localhost:3000/bower_components/angular/angular.js:4037:20
getService@http://localhost:3000/bower_components/angular/angular.js:4178:39
$FilterProvider/this.$get</<@http://localhost:3000/bower_components/angular/angular.js:16724:14
FundController/</<@http://localhost:3000/app/fund/fund.controller.js:24:28
processQueue@http://localhost:3000/bower_components/angular/angular.js:13300:27
scheduleProcessQueue/<@http://localhost:3000/bower_components/angular/angular.js:13316:27
$RootScopeProvider/this.$get</Scope.prototype.$eval@http://localhost:3000/bower_components/angular/angular.js:14555:16
$RootScopeProvider/this.$get</Scope.prototype.$digest@http://localhost:3000/bower_components/angular/angular.js:14371:15
$RootScopeProvider/this.$get</Scope.prototype.$apply@http://localhost:3000/bower_components/angular/angular.js:14660:13
done@http://localhost:3000/bower_components/angular/angular.js:9734:36
completeRequest@http://localhost:3000/bower_components/angular/angular.js:9924:7
requestLoaded@http://localhost:3000/bower_components/angular/angular.js:9865:1
angular.js (line 11707)

Here is how I've defined the filter:

(function() {
    'use strict';

    angular
        .module('app')
        .filter('orderObjectBy', orderObjectBy);


    function orderObjectBy(input, attribute) {
        console.info("orderObjectBy filter");
        if (!angular.isObject(input)) return input;

        var array = [];
        for(var objectKey in input) {
            array.push(input[objectKey]);
        }

        array.sort(function(a, b){
            a = parseInt(a[attribute]);
            b = parseInt(b[attribute]);
            return a - b;
        });
        return array;
    };
  })();

I'm using this filter my controller like so :

vm.getClasses().then(function(data){
    $filter('orderObjectBy')(data.data,'displayOrderEN' ));

});

where data.data is data from $http rest call and displayOrderEN is a property. Heres a sample of Json data: 

[
  {
    "fundClassCode": "qqq",
    "displayOrderEN": 18,
    "displayOrderFR": 18
  },
  {
    "fundClassCode": "Aaaa",
    "displayOrderEN": 1,
    "displayOrderFR": 1
  },
  {
    "fundClassCode": "sss",
    "displayOrderEN": 2,
    "displayOrderFR": 2
  },
  {
    "fundClassCode": "dddd",
    "displayOrderEN": 12,
    "displayOrderFR": 12
  }
]

Here is a plunker: http://plnkr.co/edit/EaIJIriq6SG7YPeG7K0g?p=preview

Upvotes: 1

Views: 1795

Answers (2)

Callum Linington
Callum Linington

Reputation: 14417

As I suspected: plnkr

You need the function to return a function that angular can use. docs

The outer function is used so that you can inject services into your filter.

function orderObjectBy() {
    return function (input, attribute) {
        console.info("orderObjectBy filter");
        if (!angular.isObject(input)) return input;

        var array = [];
        for(var objectKey in input) {
            array.push(input[objectKey]);
        }

        array.sort(function(a, b){
            a = parseInt(a[attribute]);
            b = parseInt(b[attribute]);
            return a - b;
        });
        return array;
    }
}

There is also a typo:

vm.getClasses().then(function(data){
    $filter('orderObjectBy')(data.data,'displayOrderEN' )); //<--- extra parenthesis

});

Upvotes: 2

Omri Aharon
Omri Aharon

Reputation: 17064

You were missing the invoking function - when creating a custom filter, the second argument is a parameterless function. Source - https://docs.angularjs.org/tutorial/step_09

Change to:

.filter('orderObjectBy', function () {
      return orderObjectBy;
 });

Or alternatively just include that function in your orderObjectBy already.

Updated Plunker

Upvotes: 3

Related Questions