Firebase Firestore - Compare data from 2 collections

Question

I have a problem with my firebase database. I would like to be able to retrieve and compare the content of 2 different collections. In this case I want to check that the user's answer is the same as the answer of the answer key which is in another collection. The problem is that I think the queries are done asynchronously, so I can't save the value outside the docRef.get() function. Thanks in advance for your help.

Below is where I get the user's answer :

firebase.auth().onAuthStateChanged((user) => {
         if (user) {
             var uid = user.uid;
             document.getElementById("useruser").innerHTML = user.displayName;

              var docRef = db.collection("Quiz").doc(user.displayName);
              docRef.get().then(function(doc) {
                    if (doc.exists) {
                       console.log("Document data:", doc.data());
                       document.getElementById("question1_1").innerHTML = doc.data().Question; //Here I have my user's answer
                       document.getElementById("reponse1_1_1").innerHTML = doc.data().Reponse1;
                       var lisetRep = doc.data().Reponse1;
                       document.getElementById("reponse1_1_2").innerHTML = doc.data().Reponse2;
                       document.getElementById("reponse1_1_3").innerHTML = doc.data().Reponse3;
                       document.getElementById("reponse1_1_4").innerHTML = doc.data().Reponse4;
                    } else {
                       // doc.data() will be undefined in this case
                       console.log("No such document!");
                    }
              }).catch(function(error) {
                    console.log("Error getting document:", error);
              });



        } else {
           window.location.href="account-connexion.html";
        }
     });

Below is where I get the corrected answer

var docRef = db.collection("ReponseJ").doc("ReponseJuste");
                  docRef.get().then(function(doc) {
                        if (doc.exists) {
                           console.log("Document data:", doc.data());
                           document.getElementById("question1_1").innerHTML = doc.data().Question; //Here I have the corrected answer
                           document.getElementById("reponse1_1_1").innerHTML = doc.data().Reponse1;
                           var lisetRep = doc.data().Reponse1;
                           document.getElementById("reponse1_1_2").innerHTML = doc.data().Reponse2;
                           document.getElementById("reponse1_1_3").innerHTML = doc.data().Reponse3;
                           document.getElementById("reponse1_1_4").innerHTML = doc.data().Reponse4;
                        } else {
                           // doc.data() will be undefined in this case
                           console.log("No such document!");
                        }
                  }).catch(function(error) {
                        console.log("Error getting document:", error);
                  });

Answer 1

You need to chain the promises, and make the values captured in the first then() block available in the second then() block as follows. I've used an Array but you can use any other equivalent method.

      var answerArray = [];

      docRef
        .get()
        .then(function (doc) {
          if (doc.exists) {
            answerArray.push(doc.data().Reponse1);
            answerArray.push(doc.data().Reponse2);
            answerArray.push(doc.data().Reponse3);
            answerArray.push(doc.data().Reponse4);

            console.log('Document data:', doc.data());
            document.getElementById(
              'question1_1'
            ).innerHTML = doc.data().Question; //Here I have my user's answer
            document.getElementById(
              'reponse1_1_1'
            ).innerHTML = doc.data().Reponse1;
            var lisetRep = doc.data().Reponse1;
            document.getElementById(
              'reponse1_1_2'
            ).innerHTML = doc.data().Reponse2;
            document.getElementById(
              'reponse1_1_3'
            ).innerHTML = doc.data().Reponse3;
            document.getElementById(
              'reponse1_1_4'
            ).innerHTML = doc.data().Reponse4;

            // See the return below
            return db.collection("ReponseJ").doc("ReponseJuste").get(); 

          } else {
            // doc.data() will be undefined in this case
            console.log('No such document!');
            throw new Error('...');
          }
        })
        .then(function (doc) {
          if (doc.exists) {
              // Here compare the answers and the correct responses
              // For example
              if (answerArray[0] === doc.data().Reponse1 && answerArray[1] === doc.data().Reponse2 && ...) {

              }
          }
        }
        .catch(function (error) {
          console.log('Error getting document:', error);
        });
    } else {
      window.location.href = 'account-connexion.html';
    }
  });