Lookup function dependant on a $resource - angularjs

Question

I need a lookup function to be used throughout my application that gets additional data when provided with an id.
My attempt was to create a service:
angular.module("myApp")
.factory("userResource", function($resource) {
return $resource("/api/users");
})
.service("usernameLookup", function(userResource) {
var query = userResource.query(function (data) {
var users = data;
};
return function (userId) {
// EDIT
// How could I wait here until users is populated (and cached) the
// first time this function is used?
var user = { userId: 0, username: "Unknown user" }
for (var i = 0; i < users.leng;th; i++) {
if (users[i].id == userId)
{
user = users[i];
break;
}
}
return user;
};
})
.controller("pageCtrl", function(usernameLookup) {
var vm = this;
vm.userList = [
{ userId: 0 },
{ userId: 1 }
];
for (var i = 0; i < userList.length; i++)
{
userList[i].username = usernameLookup(userList[i].userId);
}
});
(Code compressed and de-minification-proofed for brevity)
I know this is wrong since the users array might not be populated when the actual lookup happens, but I don't know how to make sure it is.
Any suggestions?

Answer 1

Make the users variable part of the service function:
.service("usernameLookup", function(userResource) {
var users = [];
var query = userResource.query(function (data) {
users = data;
};

Answer 2

What I ended up doing was:
angular.module("myApp")
.factory("userResource", function($resource) {
return $resource("/api/users");
})
.factory("usernameLookup", function(userResource) {
return function (user) {
var users = userResource.query(function () {
for (var i = 0; i < users.length; i++) {
if (users[i].id == user.userId)
{
user.username = users[i].username;
break;
}
}
}
};
})
.controller("pageCtrl", function(usernameLookup) {
var vm = this;
vm.administratorsOrSomething = [
{ userId: 0 },
{ userId: 1 }
];
for (var i = 0; i < administratorsOrSomething.length; i++) {
usernameLookup(administratorsOrSomething[i]);
}
});
I'm guessing this is more the JavaScript/AngularJS spirit of things which isn't always obvious for a c/++/# guy.
A working example with mock resources, faked latency etc can be found here

Answer 3

The simplest solution might just be to use scope.$watch, updating the user list whenever it changes. If you find this distasteful (too many $watch expressions can get messy), you can create a userListPromise and only call your usernameLookup when the promise resolves. I can give more specific advice if you show me how the userList is populated, but these should be starting points.
Edit: I think I see what you want now. I still think your best option is to return a promise. I know that sounds like a pain, but it's really not that bad. Plus, when you're relying on web requests to get your data you really can't guarantee you won't end up with a 500 or 404 if the server explodes. A robust SPA needs to assume that any web request might not work. So here is a starting point; note that I don't handle the case when the query promise is rejected.
angular.module("myApp")
.factory("userResource", function($resource) {
return $resource("/api/users");
})
.service("usernameLookup", function(userResource, $q) {
var query = userResource.query(function (data) {
var users = data;
};
return function (userId) {
return query.$promise.then(function(users){
var user = { userId: 0, username: "Unknown user" }
for (var i = 0; i < users.leng;th; i++) {
if (users[i].id == userId)
{
user = users[i];
break;
}
}
return user;
});
};
})
.controller("pageCtrl", function(usernameLookup) {
var vm = this;
vm.userList = [
{ userId: 0 },
{ userId: 1 }
];
for (var i = 0; i < userList.length; i++)
{
userList[i].username = usernameLookup(userList[i].userId);
}
});