Calling then function after fetching data from firebase in ionic 3

Question

I want fetch data from firebase after that I want to execute another function. Second function have to wait until first one is complete .

this.oAngularFireDatabase.database.ref('Users').orderByKey()
            .on('value', snapshot => {
              if (snapshot.hasChildren()) {
                snapshot.forEach(innerSnap => {
                  if (innerSnap.hasChild(user.uid)) {
                    //User role key
                    this.loggedInUserUserRoleKey = innerSnap.key;
                    //User id
                    this.loggedInUserId = user.uid;

                    //User name
                    this.loggedInUserName = innerSnap.child(user.uid).child("user_name").val();

                    if (innerSnap.child(user.uid).hasChild("user_image")) {
                      //User Image
                      this.loggedInUserImage = innerSnap.child(user.uid).child("user_image").val();
                    }
                    return false;
                  }
                })
              }
            }) 

I can't call then function after on it gives me an error. In my above code, I want call another function after all data are fetch from firebase.

Answer 1

The Firebase on() method can fire multiple times: once when it initially loads the data, and again whenever the data changes. Since a promise (the thing you call then() on) can only resolve once, on() can't return a promise.

There are two options here:

1. You want to only load the data once.

   If this is the case, you should use Firebase's once() method, which does return a promise.

    this.oAngularFireDatabase.database.ref('Users').orderByKey() .once('value').then(snapshot => { if (snapshot.hasChildren()) { snapshot.forEach(innerSnap => { if (innerSnap.hasChild(user.uid)) { //User role key this.loggedInUserUserRoleKey = innerSnap.key; //User id this.loggedInUserId = user.uid; //User name this.loggedInUserName = innerSnap.child(user.uid).child("user_name").val(); if (innerSnap.child(user.uid).hasChild("user_image")) { //User Image this.loggedInUserImage = innerSnap.child(user.uid).child("user_image").val(); } return false; } }) } }).then(value => { // TODO: perform subsequent action on boolean value }) 

2. You want to listen for changes on the data too.

   If this is the case, you should put the subsequent action you want to take into the on() callback:

    this.oAngularFireDatabase.database.ref('Users').orderByKey() .on('value', snapshot => { if (snapshot.hasChildren()) { snapshot.forEach(innerSnap => { if (innerSnap.hasChild(user.uid)) { //User role key this.loggedInUserUserRoleKey = innerSnap.key; //User id this.loggedInUserId = user.uid; //User name this.loggedInUserName = innerSnap.child(user.uid).child("user_name").val(); if (innerSnap.child(user.uid).hasChild("user_image")) { //User Image this.loggedInUserImage = innerSnap.child(user.uid).child("user_image").val(); } } }) // TODO: perform subsequent action on data } }) 

Note that both of these operations look pretty expensive for what they're trying to accomplish: scanning a JSON tree for a specific value is an anti-pattern in Firebase, and typically means you should modify/augment your JSON to allow a direct lookup or query.

For example, I suspect you now have a structure like /Users/$randomkey/$uid: { ..user data... } . For better performance, consider storing the user data directly under their UID: /Users/$uid: { ..user data... } . This removes the need for a query, and allows you to directly load the data for a user from this.oAngularFireDatabase.database.ref('Users').child(user.uid) .