Home > front end >  firestore query wait for nested foreach loop
firestore query wait for nested foreach loop

Time:02-26

I'm trying to populate an array with names from all documents in a collection, and also populate another array with all the subcollection documents from those parent documents.

  let data = []
  let names = []
  
  const suppliers = await db.collection('suppliers').get()
  
  suppliers.forEach(async supplier => {

    names.push({name: supplier.data().name, id: supplier.id })

    const deliveries = await db.collection('suppliers').doc(supplier.id).collection('deliveries').get()
    
    deliveries.forEach(delivery => {
      
      data.push(delivery.data())
    })
  })

  console.log(names) // Populated
  console.log(data) // Empty

The problem is that it doesn't wait for the inner loop to finish before executing the code outside. The names array gets populated but the the data array is empty. How can i make the nested loop finish before executing the outside code?

CodePudding user response:

Foreach doesn't support asynchronous callback. In order to get rid of this you can use.

let data = [];
let names = [];
suppliers.then(async(supplier) => {
    names.push({name: supplier.data().name, id: supplier.id })
    const deliveries = await db.collection('suppliers')                                            
                               .doc(supplier.id)
                               .collection('deliveries')
                               .get()
    
    deliveries.forEach(delivery => {
      data.push(delivery.data())
    })
  })

CodePudding user response:

Loading the deliveries for a supplier is an asynchronous operation. Since you're loading the deliveries for all suppliers and only want to log once all of them are loaded, you need to wait for multiple asynchronous operations, which requires the use of Promise.all:

let data = []
let names = []

const suppliers = await db.collection('suppliers').get()

const promises = suppliers.docs.map(supplier => {

  names.push({name: supplier.data().name, id: supplier.id })

  return db.collection('suppliers').doc(supplier.id).collection('deliveries').get()    
})

const allDeliveries = await Promise.all(promises)
allDeliveries.forEach((deliveries) => {
  deliveries.forEach(delivery => {      
    data.push(delivery.data())
  })
})

console.log(names)
console.log(data)
  • Related