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?
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)
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())
})
})