How do you load related data with Firebase in AngularJS?

Question

I am having an array object of "users" that stores all the profile information of these users (such as name and email) along with their user.uid.

Another object "friends" stores for each user.uid which friends the user but with only the friend.uid.

Now when I retrieve all the friends of user.uid, I want somehow to link the profiles of this friend to the display. This obviously will result in problems with asynchronous loading.

I am using Firebase and wish if someone could give me examples on how they solved it.

I have tried the following, but it does not work (shows that the length is 0 after $loaded() even though it loaded all the users in a list:

Controller

FriendsService.getFriends(user.uid).$loaded(
    function(Friends){

      $scope.Friends = Friends;

      // Friends is here still undefined???

      angular.forEach(Friends, function(iterator){

        FriendsService.getUserData(iterator.friendID).$loaded(function(output){

          $scope.FriendsData.push(output)

        })
      })
    },
    function(error){
      window.alert("Ooooops: " + error)
    })

Services

var getFriends = function(userID) { 

    return fbutil.syncObject("friendsofusers/" + userID + "/friends/")

    // equivalent to:
    // var ref = new Firebase("https://yourapp.firebaseio.com/friendsofusers/" + userID + "/friends/");
    // var sync = $firebase(ref)
    // return sync.$asObject();

 };

 var getUserData = function(userID) {

            return fbutil.syncObject("users/" + userID);

        };

This code doesn't provide enough context to verify and understand the problem. No mention that you are using angularFire-seed, no version info, nothing to explain how Friends is created. You also [synchronously tried to read an asynchronous list](http://stackoverflow.com/questions/27049342/impossible-to-access-array-with-angular-and-firebase). Also, you created a JavaScript object and attempted to use it as an array. Try syncArray() instead of syncObject() (if you want a length) and [read the docs](http://goo.gl/ouQm1j) [docs](https://angularjs.org) [docs](http://goo.gl/J7Vym). — Kato, Jan 29 '15 at 16:36
Hello Kato, thank you for the reply. I will try to update my question. Can you explain to me where I make the mistake of synchronously calling an asynchronous list, since I call the list after .$loaded()? — AMG, Feb 01 '15 at 04:42

score 0 · Answer 1 · answered Jan 28 '15 at 13:06

It's hard to be sure, since the code in your question is somewhat incomplete. But it's fairly likely that your code simply needs to inform AngularJS that the scope was modified:

    FriendsService.getUserData(iterator.friendID).$loaded(function(output){
        $timeout(function() {
            $scope.FriendsData.push(output)
        }
    })

You'll need to inject $timeout into the service for this. With this call in place, AngularJS will be notified that there is new data available and the views will be updated.

Note that this is documented in the relevant section of the AngularFire guide.

Hello Frank. Thank you for the reply. I tried it, but again it only displays only the first item, even though there are three in the object :( — AMG, Jan 28 '15 at 15:11

How do you load related data with Firebase in AngularJS?

1 Answers1