I am trying to pull my doc.data Array from within a function and use it outside the scope

Question

I am trying to pull my docData Array from within the function and for some reason, I am not able to pull the variable from the function and use it outside of the scope I want to be able to pull the array and use it free from the scope

          function showData() {
            var jobRef = dataFirebase.collection("Jobs").where("Industry" , "==" , "Medical");


            jobRef.get().then(function(querySnapshot) {

              let allDocData = [];
              querySnapshot.forEach(function(doc) {
                  allDocData.push(doc.data());
              });

              return allDocData;

            });
          }

          var dataValues = showData()


          console.log(dataValues);

I am hoping to pull the allDocData values and use it freely outside the scope of the function.

Answer 1

Data is loaded from Firestore asynchronously, to prevent from blocking the browser. While the data is being loaded, the rest of your code continues on. Then when the data is loaded, the then() block/callback is called.

It's easiest to see what this means by placing some log statements in your code:

var jobQuery = dataFirebase.collection("Jobs").where("Industry" , "==" , "Medical");

console.log("Before starting to load");
jobQuery.get().then(function(querySnapshot) {
    console.log("Got data");
});
console.log("After starting to load");

When you run this code, the output is:

Before starting to load

After starting to load

Got data

This is probably not the order you expected, and makes sense if you read my explanation above. But this also means that the return statement you have doesn't do anything. The function is actually already long complete by the time the data has been loaded.

For this reason, any code that needs the data must either be inside the then() callback or be called from within there.

---

So the simplest example of that is to move the logging of the data into the callback:

  function showData() {
    var jobQuery = dataFirebase.collection("Jobs").where("Industry" , "==" , "Medical");

    jobQuery.get().then(function(querySnapshot) {

      let allDocData = [];
      querySnapshot.forEach(function(doc) {
          allDocData.push(doc.data());
      });

      console.log(dataValues);

    });
  }

  showData()

This works, but limits the reusability of your showData() method.

---

The more reusable and modern option is to make use of the fact that get() returns a promise, and return that promise to the calling code. You can even return values from within the promise that then "bubble up" to the caller:

function showData() {
  var jobRef = dataFirebase.collection("Jobs").where("Industry" , "==" , "Medical");


  return jobRef.get().then(function(querySnapshot) {

    let allDocData = [];
    querySnapshot.forEach(function(doc) {
        allDocData.push(doc.data());
    });

    return allDocData;

  });
}

showData().then(function(dataValues) {
    console.log(dataValues);
});

You'll note that we now also have a then() block in the calling code, because we need to wait with logging the value until the data has been asynchronously loaded.

Answer 2

If you just want to use allDocData outside the function:

var docData;

function showData() {
    var jobRef = dataFirebase.collection("Jobs").where("Industry" , "==" , "Medical");


    jobRef.get().then(function(querySnapshot) {

    let allDocData = [];
    querySnapshot.forEach(function(doc) {
        allDocData.push(doc.data());
    });
    docData = allDocData;
    //Rest of code
}