7

I created this filter to transform userID to user's name: 

angular.module('idToName', ['userService'])

.filter('idToName', function(User) {
  User.allUsers()
  .success(function(data) {
    userData = data;
  });
  var assignee;
  return function(IDs) {
    for (var j = 0; j < userData.length; i++) {
      for (var i = 0; i < IDs.length; j++){
        if (IDs[i] == userData[j]._id) {
          assignee[i] = userData[j].firstname + ' ' + userData[j].lastname + ' ' + userData[j].cname;
        }
      }
    }
    return assignee;
  }
})

It takes in an array of userIDs, and it should find the corresponding userData object and return its names.

But when I run it, it gets this error:

Error: $injector:unpr
Unknown Provider

Unknown provider: idToNameFilterProvider

So what did I do wrong? I would appreciate any help.

Improve this question
8
  • 2
    How do you use idToName? Commented Aug 13, 2015 at 0:40
  • 2
    Your userData is obtained asyncly, when you call the filter, the userData may not have arrived yet. Commented Aug 13, 2015 at 0:42
  • Separate issue. If the IDs are what you are searching for, then IDs should be the outer loop and userData the inner loop. Then put a break inside the if statement so you don't continue to look for a match after you find it. Commented Aug 13, 2015 at 0:59
  • 4
    The error is coming from the code that is trying to use the filter, not the filter itself. Either the Javascript file with the filter in it is not loaded (or if using AMD, the module isn't being required), or the idToName module isn't listed as a dependency. Commented Aug 13, 2015 at 1:11
  • 2
    filter needs to be synchronous. Use arguments to pass in data that will be received later then just check if that argument is defined or not Commented Aug 13, 2015 at 1:29

1 Answer 1

Reset to default
3

Please check working demo: JSFiddle

angular.module('idToName', [])
    .factory('userService', ['$http', function ($http) {
    var users = [];
    return {
        all: function () {
            return $http.get('http://jsonplaceholder.typicode.com/users');
        }
    };
}])
    .filter('idToName', function () {
    var assignee = [];
    return function (userData, IDs) {
        if (!userData || userData.length === 0) {
            return 'loading...';
        }
        for (var i = 0; i < userData.length; i++) {
            for (var j = 0; j < IDs.length; j++) {
                if (IDs[j] == userData[i].id) {
                    assignee[i] = userData[i].name + ' ' + userData[i].username + ' ';
                }
            }
        }
        return assignee;
    }
})
    .controller('MyCtrl', ['$scope', 'userService', function ($scope, userService) {
    $scope.IDs = [1, 2, 3, 4];
    $scope.users = [];
    userService.all().success(function (data) {
        $scope.users = data;
    });
}]);

Use it in HTML:

<div ng-app="idToName" ng-controller='MyCtrl'>{{ users | idToName:IDs }}</div>

Some issues in your code:

  1. Your userData is obtained asyncly, when you call the filter, the userData may not have arrived yet. And your filter should not be fetching data. Because it is not its job. You'd better separate the data-fetching logic to some independent logic. So I created another service userService

  2. You nested for loop is messed with the i and j variables. I have made them working.

  3. idToName is not a good module name.

Update 1

Learned from comments of @tuckerjt07 and @ach, please check your JavaScript inclusion and module dependency code. There must be something wrong when trying to inject the filter. Seems the filter itself is not found within the context.

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

10 Comments

While valid it doesn't address the issue as represented in the question. The asynchronous call wouldn't throw an injector error.
@tuckerjt07 I tried to clear out the problem regarding mixing async calls and filters. Em, there must be something wrong when calling the filter, which causes the injector error. But we don't have the full picture. That might be solved upon question owners' investigation into his/her code.
the error he gave us matches perfectly with what ach suggested to fix it.
Wow thanks for the help guys. I've tried the method @Joy and @ ach suggested. I fixed the issue @ ach mentioned, that was indeed a silly mistake. But as for your jsFiddle, it seems that the filter isn't even used or working cuz your html is just showing users rather than ID
@thousight Here {{ users | idToName:IDs }} calls the filter to work. The $http call gets the user objects only.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.