How to get a data of object from Firebase 'key':'true' patern - angularjs

Question

I have this firebase data:
{
"userData": {
"user01": {
"name": "User One"
"provider": "provider0001"
},
"user02": {
"name": "User Two"
"provider": "provider0001"
},
"user03": {
"name": "User Three"
"provider": "provider0002"
}
},
"provider": {
"provider0001": {
"users": {
"user01": true,
"user02": true
}
},
"provider0002": {
"users": {
"user03": true
}
}
}
}
controller
vm.provider = $firebaseObject(ref.child('provider').child('provider0001'));
simple html
<ul>
<li ng-repeat="user in $ctrl.provider.users">
{{user}}
</li>
</ul>
Why I cannot list {{user}} as object? The above will display list of true's, but how can I access the user object it self?

Answer 1

You need to map the keys (your userId's) in the users-object, to the values in your userData-object. You can get the keys in an ng-repeat-directive like this:
ng-repeat="(key, value) in $ctrl.provider.users"
Then in your controller you need to add the userData object to your controller scope:
vm.userData = $firebaseObject(ref.child('userdata'));
So you can implement your ng-repeat like this:
<ul>
<li ng-repeat="(key, value) in $ctrl.provider.users"
ng-init="user = $ctrl.userData[key]">
{{user}}
</li>
</ul>
With that said, you probably ought to do this mapping when you retrieve the data in the controller initially. Something like this:
function loadData(){
var providerUsers = $firebaseObject(ref.child('provider').child('provider0001').child('users'));
var userData = $firebaseObject(ref.child('userData'));
vm.users = [];
angular.forEach(providerUsers, function(value, key) {
vm.users.push(userData[key]);
});
}
Then you can just iterate using ng-repeat over this new vm.users-array.
Update
Here's a solution where you only retrieve the actual mapped users. It makes a query for each user, since I couldn't find a decent way to join two collections by key using just a single Firebase query.
function loadData(){
var userRef = ref.child('provider').child('provider0001').child('users');
var userDataRef = ref.child('userData');
vm.users = [];
userRef.once('value', function(snapshot){
snapshot.forEach(function(userId){
userDataRef.child(userId.key()).once("value", function(user){
$scope.$apply(function () {
vm.users.push(user.val());
});
});
})
});
}
My familiarity with Firebase is very limited so there might be better solutions out there

Answer 2

<ul>
<li ng-repeat="(key,user) in $ctrl.provider.users">
{{key}}:{{user}}
</li>
key will give the key of the user and user will give value