push to array getting the file from firestore javascript

Question

I try to push an array that I got from firestore, but when I try it's undefined

this is the code

  const tmp = [];
  const ref = firestore.collection("users").doc(user?.uid);
  firestore
    .collection("countrys")
    .get()
    .then((x) => {
      x.forEach((y) => {
        tmp.push(y.data());
      });
    });
  console.log(tmp); //work
  console.log(tmp[0]); //no work

this is the result from the console

as I see it's not same like another array

another array like (3) [{…}, {…}, {…}] ,but my array just show []

can someone explain to me why that's not working? thanks!

Does this answer your question? [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Dane Brouwer, Apr 29 '21 at 12:40
@DaneBrouwer sorry I'm already read it but I'm still don't understand, can you give me some example or code? — ubi goreng, Apr 29 '21 at 12:46
What kind of array are you expecting? Can you add a sample ? Can you please try `console.log(JSON.stringify(tmp))` ? and share the screenshot of it ? — Dharmaraj, Apr 29 '21 at 12:48
`tmp` is undefined because the code you're running is asynchronous, and you're logging `tmp` synchronously. — Dane Brouwer, Apr 29 '21 at 12:56

Dane Brouwer · Answer 1 · 2021-04-29T14:00:36.563

1

The issue here is that you've mixed asynchronous code with synchronous code. To clarify further, firestore.collection("countrys").get() is a promise.

So if you want to interact with the data it returns just do it in your .then()

firestore
  .collection("countrys")
  .get()
  .then((querySnapshot) => {
    const tmp = [];
    querySnapshot.forEach((doc) => {
      tmp.push(doc.data());
    });
    console.log(tmp);
    console.log(tmp[0]);
  });

I would suggest doing some further reading into promises as well.

edited Apr 29 '21 at 14:00

answered Apr 29 '21 at 13:28

Dane Brouwer

2,827
1
22
30

I try to return it but got undefined , can you help me ? – ubi goreng Apr 29 '21 at 13:55
Does your collection actually have data? Is `countrys` correctly spelled? (The correct plural spelling is `countries`) Because the above is directly from [Firestore's documentation](https://firebase.google.com/docs/firestore/query-data/get-data#get_all_documents_in_a_collection) – Dane Brouwer Apr 29 '21 at 14:01
I add my answer below, hope you can understand – ubi goreng Apr 29 '21 at 14:13
Edit your answer below into your question, don't add a new answer. It's still asynchronous, if you need to interact with `tmp` do it inside of the `.then`. You cannot access it outside of `.then`. – Dane Brouwer Apr 29 '21 at 14:26

score 0 · Answer 2 · answered Apr 29 '21 at 14:02

the console.log(temp) will execute before the

x.forEach((y) => {
    tmp.push(y.data());
 });

code will occur.

You need to add another .then chained to the then method so it will execute when the promise resolve to make the console log succeeded.

This is part of the event loop in JS.

I recommend to read more about it here:

https://blog.sessionstack.com/how-javascript-works-event-loop-and-the-rise-of-async-programming-5-ways-to-better-coding-with-2f077c4438b5

And more about promises here:

https://web.dev/promises/

push to array getting the file from firestore javascript

2 Answers2