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

Object key can not be async, you better get the data before to pass it as object key. — Jafar Jabr, Jan 20 '22 at 00:09
Does this answer your question? [How to return the response from an asynchronous call](https://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-asynchronous-call) — ggorlen, Jan 20 '22 at 00:11
On Stack Overflow, you should not edit your question with an answer. You can answer your own question just like any other answer - this is normal. — Doug Stevenson, Jan 20 '22 at 02:27

score 0 · Answer 1 · answered Jan 20 '22 at 00:09

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
  });
}

score 0 · Answer 2 · answered Jan 20 '22 at 00:17

0

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);

answered Jan 20 '22 at 00:17

Frank van Puffelen

565,676
79
828
807

score 0 · Accepted Answer · answered Jan 27 '22 at 14:33

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);
    });

  }

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

3 Answers3