How can I query specific user info with my own indexes and pass it to a $firebaseArray in order to sync with my view?

Question

I have the follow structure in my firebase database:

{
rooms: {
    LKVmdIPX2_235ksf: {
        members: {
            poasj12O-s657-235a-1236-9832lksf976c: true
        },
        name: Room 1,
        public: true
    },
    KS0sk21gleascm14: {
        members: {
            poasj12O-s657-235a-1236-9832lksf976c: true
        },
        name: Room 2,
        public: true
    }
},
users: {
    poasj12O-s657-235a-1236-9832lksf976c: {
        rooms: {
            LKVmdIPX2_235ksf: true,
            KS0sk21gleascm14: true
        },
        name: Filler
        email: filler@filler.com
    }
}

In order to get every room from a specific user(in this case the user with = poasj12O-s657-235a-1236-9832lksf976c) I've done the following:

$scope.rooms = {};
var ref = new Firebase('URL'); 
var userRef = ref.child('users').child(uid); // I'm manage to get the user's UID after login;
var roomRef = ref.child('rooms');

userRef.child('rooms').on('child_added', function(data) {
    roomRef.child(data.key()).on('value', function(rData) {
       console.log(rData.val()); // prints each room object
       $scope.rooms = $firebaseArray(rData.ref()); 
    });
});

So in order to be able to display that info in the view I've tried:

$scope.rooms = $firebaseArray(rData.ref());

The problem is when I do console.log($scope.rooms) I just get an empty object, and also if I put it in the view {{rooms}} it even shows me all the rooms that the user has.

So how here's my question, How can I query specific user info with my own indexes and pass it to a $firebaseArray in order to sync with my view?

OBS: console.log(rData.val()) prints the right objects that I would like to have in the $scope.room variable.

This is the reference where I found the "query" https://www.firebase.com/blog/2013-04-12-denormalizing-is-normal.html

Great data structure! What you're looking for is ["extending the `$firebaseArray`"](https://www.firebase.com/docs/web/libraries/angular/guide/extending-services.html#section-firebasearray). I know Kato wrote a great answer on it here too, but can't find the link right now. — Frank van Puffelen, Feb 28 '16 at 08:31
Found it: http://stackoverflow.com/questions/30299972/joining-data-between-paths-based-on-id-using-angularfire. I'll probably mark yours as a duplicate. — Frank van Puffelen, Feb 28 '16 at 08:33

score 1 · Accepted Answer · answered Mar 01 '16 at 22:20

You must notice that child_added and value events are async. If you put a console.log at the bottom of your controller you probably will see an empty object/array because they aren't populated yet in the execution time..

Don't forget to call $scope.$apply inside your async requests to let your view know about a new value in the variable.

(function() {
app.controller('lobbyController',
    function($rootScope, $scope, $state, $ionicHistory, $firebaseArray, $firebaseObject, firebaseObj, nodes) {

  $scope.rooms = []; // initialize an empty array 

  $scope.campaigns = {};
    var uid = $rootScope.authData.uid;
  var userInfo;
  userRef     = firebaseObj.child(nodes.USER_NODE).child(uid);
  campaignRef = firebaseObj.child(nodes.CAMPAIGN_NODE);

  userRef.child(nodes.CAMPAIGN_NODE).on('child_added', function(data) {
      campaignRef.child(data.key()).on('value', function(cData) {
        // force the view to rerender after a new value came from firebase
        $scope.$apply(function() {
          // push the room to rooms array
          $scope.rooms.push(cData.val());
        })
      });
  });

    $scope.createCampaign = function() {
        $state.go('createCampaign');
    }
    }
);
})();

A good practise to debug your $scope is expose it to the window object then check it on browser console. Inside your controller put the follow code:

window.$scope = $scope;

How can I query specific user info with my own indexes and pass it to a $firebaseArray in order to sync with my view?

1 Answers1