Ad

Display Data From Promise Firebase

I have a service like this

async getBirthdays() {
    const user = await this.authSP.getUserInfo();
    let bdays = [];
    return await new Promise<any>((resolve) => {
    this.angularFire.database.ref("birthdays").orderByChild("creator_user_id").equalTo(user.uid).once("value", (snapshot) => {
        snapshot.forEach(function (childSnapshot) {
          const value = childSnapshot.val();
          value.$key = childSnapshot.key;
          bdays.push(value);
        });
    });

    resolve(bdays);

    });
}

This promise return this array of objects

enter image description here

In my component i just try to display avatar value :

this.birthdays = await this.birthdaySP.getBirthdays().then(res => {
  var data = res.map(t=>t.avatar);
  console.log(data);
});

But console.log(data) return an empty array.

Any help is apreciated

Ad

Answer

Right now you call resolve(bdays) before the once() callback has run, which means that bdays is just an empty array.

The call to resolve() needs to be inside the callback for bdays to contain the data:

async getBirthdays() {
    const user = await this.authSP.getUserInfo();
    let bdays = [];
    return await new Promise<any>((resolve) => {
        this.angularFire.database.ref("birthdays").orderByChild("creator_user_id").equalTo(user.uid).once("value", (snapshot) => {
            snapshot.forEach(function (childSnapshot) {
              const value = childSnapshot.val();
              value.$key = childSnapshot.key;
              bdays.push(value);
            });
            resolve(bdays);
        });    
    });
}
Ad
source: stackoverflow.com
Ad