How to read Object from Firebase using AngularJS

Question

I am developing my app, and one of the features will be messaging within the application. What I did, is I've developed 'send message' window, where user can send message to other user. The logic behind it is as following:
1. User A sends message to User B.
2. Firebase creates following nodes in 'Messaging':
"Messaging"->"User A"->"User B"->"Date & Time"->"UserA: Message"
"Messaging"->"User B"->"User A"->"Date & Time"->"UserA: Message"

Here is the code that I am using for sending messages:

  sendMsg: function(receiver, content) {
    var user = Auth.getUser();
    var sender = user.facebook.id;
    var receiverId = receiver;
    var receiverRef = $firebase(XXX.firebase.child("Messaging").child(receiverId).child(sender).child(Date()));
    var senderRef = $firebase(XXX.firebase.child("Messaging").child(sender).child(receiverId).child(Date()));
    receiverRef.$set(sender,content);
    senderRef.$set(sender,content);
  },

(picture 1 in imgur album)

At the moment, I am trying to read the messages from the database, and sort them in according to date. What I've accomplished so far, is that I have stored the content of "Messaging/UserA/" in form of an Object. The object could be seen in the picture I've attached (picture 2).

http://imgur.com/a/3zQ0o

Code for data receiving:

getMsgs: function () {
    var user = Auth.getUser();
    var userId = user.facebook.id;
    var messagesPath = new Firebase("https://xxx.firebaseio.com/Messaging/");
    var Messages = messagesPath.child(userId);
    Messages.on("value", function (snapshot) {
      var messagesObj = snapshot.val();
      return messagesObj;
    }, function (errorObject) {
      console.log("Error code: " + errorObject.code);
    });
  }

My question is: how can I read the object's messages? I would like to sort the according to the date, get the message and get the Id of user who has sent the message.

Thank you so much!

Answer 1

You seem to be falling for the asynchronous loading trap when you're reading the messages:

getMsgs: function () {
    var user = Auth.getUser();
    var userId = user.facebook.id;
    var messagesPath = new Firebase("https://xxx.firebaseio.com/Messaging/");
    var Messages = messagesPath.child(userId);
    Messages.on("value", function (snapshot) {
      var messagesObj = snapshot.val();
      return messagesObj;
    }, function (errorObject) {
      console.log("Error code: " + errorObject.code);
    });
  }

That return statement that you have in the Messages.on("value" callback doesn't return that value to anyone.

It's often a bit easier to see what is going on, if we split the callback off into a separate function:

onMessagesChanged(snapshot) {
    // when we get here, either the messages have initially loaded 
    // OR there has been a change in the messages
    console.log('Inside on-value listener');
    var messagesObj = snapshot.val();
    return messagesObj;
},
getMsgs: function () {
    var user = Auth.getUser();
    var userId = user.facebook.id;
    var messagesPath = new Firebase("https://xxx.firebaseio.com/Messaging/");
    var Messages = messagesPath.child(userId);
    console.log('Before adding on-value listener');
    Messages.on("value", onMessagesChanged);
    console.log('After adding on-value listener');
  }

If you run the snippet like this, you will see that the console logs:

Before adding on-value listener
After adding on-value listener
Inside on-value listener

This is probably not what you expected and is caused by the fact that Firebase has to retrieve the messages from its servers, which could potentially take a long time. Instead of making the user wait, the browser continues executing the code and calls your so-called callback function whenever the data is available.

In the case of Firebase your function may actually be called many times, whenever a users changes or adds a message. So the output more likely will be:

Before adding on-value listener
After adding on-value listener
Inside on-value listener
Inside on-value listener
Inside on-value listener
...

Because the callback function is triggered asynchronously, you cannot return a value to the original function from it. The simplest way to work around this problem is to perform the update of your screens inside the callback. So say you want to log the messages, you'd do:

onMessagesChanged(snapshot) {
    // when we get here, either the messages have initially loaded 
    // OR there has been a change in the messages
    console.log('Inside on-value listener');
    var i = 0;
    snapshot.forEach(function(messageSnapshot) {
        console.log((i++)+': '+messageSnapshot.val());
    });
},

Note that this problem is the same no matter what API you use to access Firebase. But the different libraries handle it in different ways. For example: AngularFire shields you from a lot of these complexities, by notifying AngularJS of the data changes for you when it gets back.

Also see: Asynchronous access to an array in Firebase