Trouble with Addition Assignment in Array from Firebase

Question

I have a scenario where i need to query multiple collections at once and retrieve the values based on the collection name. I use Promise.all to do so and it works accordingly like so

var dbPromises = [];

  dbPromises.push(
    admin.firestore().collection("collection1").where("user_id", "==", uid).get(),
    admin.firestore().collection("collection2").where("user_id", "==", uid).get(),
    admin.firestore().collection("collection3").where("user_id", "==", uid).get(),
  );

  const promiseConst = await Promise.all(dbPromises);

promiseConst.forEach((qs) => {

        if (qs.size > 0) {
            if (qs.query._queryOptions.collectionId == "collection1") {
                qs.docs.map((doc) => {
                    valuesArr1.push(doc.data().arr);
                });
            } else if (qs.query._queryOptions.collectionId == "Collection2") {
                qs.docs.map((doc) => {
                    valuesArr2.push(doc.data());
                });
            } else if (qs.query._queryOptions.collectionId == "collection3") {
                qs.docs.map((doc) => {
                    valuesArr3.push(doc.data());
                });
            }
    } else {
        return 
    }
    
  });

for (var i=0; i < valuesArr1.length; i++) {
    if (valuesArr1[i].desiredData) {
        console.log('datas from for loop on datas array', valuesArr1[i].desiredData)
        globalVariable += `<img src="${valuesArr1[i].desiredData}">`; 
    }
 }

Once I do this I map the query snapshot I get and am able to retrieve the values up to this point like so

From the first collection I retrieve an array from a firestore document and then the following collections i just retrieve all documents from the collections. This all 'works' in that when I console.log into the functions console the data shows up exactly as expected. It's only when I want to iterate over the data and assign the results to a global variable to use elsewhere that strange behavior occurs.

The console.log shows the desired data in the functions console with no issues, but the output when I interpolate that data into the html and send it off in nodemailer I get the following result

undefined is always the first in the response when i use the += addition assignment operator, but if i just use the = assignment operator there's no undefined but I obviously don't get all the data I'm expecting.

There are no undefined values or documents in the collections that I'm retrieving, I've checked thoroughly and even deleted documents to make sure of it. After days of researching I've come to the conclusion it has to do with the asynchronous nature of the promise I'm working with and the data not being immediately ready when I iterate it.

Can someone help me understand what I'm doing wrong and how to fix it in node?

Answer 1

I figured out a solution to my problem and would like to share it in hopes it saves a future viewer some time.

Before, I was storing the results of the array from Firebase inside a global variable. To save some head scratching I'll post the code again below.

var globalVariableArray = []

var globalVariable

var dbPromises = [];

dbPromises.push(
  admin.firestore().collection("DataCollection").where("user_id", "==", uid).get()
);

const promiseConst = await Promise.all(dbPromises);

promiseConst.forEach((qs) => {
    if (qs.size > 0) {
        if (qs.query._queryOptions.collectionId == "DataCollection") {
       Promise.all(
         qs.docs.map(doc => {
           globalVariableArray = doc.data().arrayWithDesiredData;
         })
       );
    } 
    else {
        return 
    }  
});

globalVariableArray.map(gv => {
  globalVariable += `<p>gv.desiredData</p>` // <--- Right here is where the problem area was
})

var mailOptions = {
    from: foo@blurdybloop.com,
    to: 'bar@blurdybloop.com
    subject: 'Almost but not quite',
    html: `${globalVariable}`
};

The above code give the expected output, but the output would always have undefined first before the data showed. This happened no matter how the array from Firebase was iterated over.

After strengthening my Google-Fu, I worked out the following solution

var globalVariableArray = []

var globalVariable

var dbPromises = [];

dbPromises.push(
  admin.firestore().collection("DataCollection").where("user_id", "==", uid).get()
);

const promiseConst = await Promise.all(dbPromises);

promiseConst.forEach((qs) => {
    if (qs.size > 0) {
        if (qs.query._queryOptions.collectionId == "DataCollection") {
       Promise.all(
         qs.docs.map(doc => {
           globalVariableArray = doc.data().arrayWithDesiredData;
         })
       );
    } 
    else {
        return 
    }  
});

var mailOptions = {
    from: foo@blurdybloop.com,
    to: 'bar@blurdybloop.com
    subject: 'It works!!',
    html: `${globalVariableArray.map(dataIWantedAllAlong => <p>dataIWantedAllAlong.desiredData</p> )}` <--- Here I simply loop through the array inside the interpolation blocks and voila! no more undefined showing up in the results
};

I perform the loop inside the brackets where I interpolate the dynamic data and am no longer getting that pesky undefined showing up in my emails.

Safe travels and happy coding to you all!