cooly•2y ago

✅ – Cooly – 23-00 Dec 24

await ref.recipes.forEach(async(doc) => {
await firebase.firestore().collection("recipes").doc(doc).get()
      .then ((snap) => {
        if (snap.exists) {
          tempList.push(snap.data());
          setDataList(tempList);
          console.debug('first');
      })
      .catch((error) => {
        alert(error.message);
      })
    })
  }
console.debug('second');

await ref.recipes.forEach(async(doc) => {
await firebase.firestore().collection("recipes").doc(doc).get()
      .then ((snap) => {
        if (snap.exists) {
          tempList.push(snap.data());
          setDataList(tempList);
          console.debug('first');
      })
      .catch((error) => {
        alert(error.message);
      })
    })
  }
console.debug('second');

how come "second" gets printed before "first" is there a way to make them print in the right order

13 Replies

ScriptyChris•2y ago

@hide on tree and what's the problem/question with that code?

coolyOP•2y ago

i edited

ScriptyChris•2y ago

Oh So this code is async, hence "second" is executed before "first" Hmm, wait - no, i misread your code, because of wrong indentation - it's the matter of .forEach Try Promise.all() + .map():

await Promise.all(ref.recipes.map((doc) => {
  return firebase.firestore().collection("recipes").doc(doc).get()
      .then((snap) => {
        if (snap.exists) {
          tempList.push(snap.data());
          setDataList(tempList);
          console.debug('first');
        }
      })
      .catch((error) => {
        alert(error.message);
      })
    })
}
console.debug('second');

await Promise.all(ref.recipes.map((doc) => {
  return firebase.firestore().collection("recipes").doc(doc).get()
      .then((snap) => {
        if (snap.exists) {
          tempList.push(snap.data());
          setDataList(tempList);
          console.debug('first');
        }
      })
      .catch((error) => {
        alert(error.message);
      })
    })
}
console.debug('second');

coolyOP•2y ago

ok let me try it worked tysm i was having problems with this for so long so with a for loop i should be using promise all?

reactibot•2y ago

This question has an answer! Thank you for helping 😄 If you have a followup question, you may want to reply to this thread so other members know they're related. https://discord.com/channels/102860784329052160/565213527673929729/1056345658379997265

ScriptyChris•2y ago

forEach returns undefined and it doesn't care about promises. map returns stuff you do inside it, so it returns a promise from each call back iteration - eventually map returns a new array of stuff returned from each of it's iterations. So that new array of promises is then resolved by Promise.all, which returns a promise (when it finishes resolving), which then is awaited, so the order of execution stays as you see it

coolyOP•2y ago

oh ok i got it

ScriptyChris•2y ago

You can also use for..of loop, without Promise.all, because it doesn't use callbacks - it's just imperative, step by step iteration This should work too:

for (const doc of ref.recipes) {
  await firebase.firestore().collection("recipes").doc(doc).get()
      .then((snap) => {
        if (snap.exists) {
          tempList.push(snap.data());
          setDataList(tempList);
          console.debug('first');
        }
      })
      .catch((error) => {
        alert(error.message);
      })
    })
}
console.debug('second');

for (const doc of ref.recipes) {
  await firebase.firestore().collection("recipes").doc(doc).get()
      .then((snap) => {
        if (snap.exists) {
          tempList.push(snap.data());
          setDataList(tempList);
          console.debug('first');
        }
      })
      .catch((error) => {
        alert(error.message);
      })
    })
}
console.debug('second');

coolyOP•2y ago

@ScriptyChris sorry i have one more question is there a way to reverse it so start from the end and iterate to front nvm i got it

ScriptyChris•2y ago

Just reverse the entrypoint array ref.recipes.reverse()? !mdn Array.reverse

reactibot•2y ago

MDN

Array.prototype.reverse()

coolyOP•2y ago

yep i got it lol dumb question

reactibot•2y ago

This thread hasn’t had any activity in 12 hours, so it’s now locked. Threads are closed automatically after 12 hours. If you have a followup question, you may want to reply to this thread so other members know they're related. https://discord.com/channels/102860784329052160/565213527673929729/1056345658379997265