How to add a Promise .then() to an Array.push?

Question

I have an array however, one of the object children needs to get data from another location in my Firebase Database to show in the array. This requires a Promise.

How do I show the data from the Promise in the array?

  getListofReferrers() {

    //
    // 
    // Getting list of referrers from Firebase.
    this.eventData.getReferrersList().on('value', snapshot => {
      let rawList98 = [];
      snapshot.forEach(snap => { 
       
    // Bringing the information over into a local array to show on the page.     
        rawList98.unshift({
          id: snap.key,
          text: this.eventData.getOtherNameExternal(snap.val().userid).then( (v)=> {return v}),
          userid: snap.val().userid,
          username: snap.val().username,
          email: snap.val().useremail,
          referralPoints: this.eventData.numberWithCommas(this.eventData.getOtherProfileProperty(snap.val().userid, "referralPoints") || 0),
        });

         })
      // Taking the information into a "this." variable   
      this.referralList = rawList98;
      console.log(this.referralList);
    });

  }

I keep getting: [object Promise] when showing the "username" value.

In console.log(rawList98); however, I get the following:

email: "pjoc@pjaguar.com"
id: "referrer9OxMTyUDfiXrLp9O65XW0hUbHgH2"
referralPoints: "0"
username: t
__zone_symbol__state: true
__zone_symbol__value: "John Doe"
[[Prototype]]: Object
userid: "9OxMTyUDfiXrLp9O65XW0hUbHgH2"

How come it's showing the value received from the Promise but I can't capture that in the.then() to properly assign to the child "username"? I will need to call this Promise getting the username for every node in the Firebase Database

Answer 1

Since you need to wait for the username to be available before you can construct the object, you need to put the code inside the .then :

this.eventData.getUserName(snap.val().userid).then(v => {
  rawList98.unshift({
    id: snap.key,
    username: v,
    userid: snap.val().userid,
    email: snap.val().useremail
  });
})

Or, using async/await:

async function someFunction () {
  const v = await this.eventData.getUserName(snap.val().userid);
  rawList98.unshift({
    id: snap.key,
    username: v,
    userid: snap.val().userid,
    email: snap.val().useremail
  });
}

Answer 2

The username property that you're pushing into the array is a promise. So to get the actual value in there, you need to use then or await :

const user = rawList98.shift();
const username = await user.username;
console.log(username);

Answer 3

Thanks to Frank van Puffelen. Here was the solution to my issue: I had to put the unshift() in a variable to get the index and use that to assign the username child afterward. I use rawList98.length-user since the unshift function is adding data to the bottom, not the top.

getListofReferrers() {

    // Getting list of referrers from Firebase.
    this.eventData.getReferrersList().on('value', snapshot => {
      let rawList98 = [];
      snapshot.forEach(snap => { 
       
    var user
    
    user = rawList98.unshift({
          id: snap.key,
          username: null,
          userid: snap.val().userid,
          email: snap.val().useremail,
          referralPoints: this.eventData.numberWithCommas(this.eventData.getOtherProfileProperty(snap.val().userid, "referralPoints") || 0),
        });

this.eventData.getOtherNameExternal(snap.val().userid).then( (v)=> { rawList98[rawList98.length-user].username = v})

        
         })
      // Taking the information into a "this." variable   
      this.referralList = rawList98;
      console.log(this.referralList);
    });

  }