retrieve data asynchronously from a Firestore reference in Firebase

Question

retrieve data asynchronously from a Firestore reference in Firebase

I am currently attempting to extract the name value from a promise retrieved from the Firebase Firestore database:

Just to provide some context, I have a collection of places that each contain information such as a name and a reference to an owner document, which only includes a name.

var names: any = [];
this.props.places.snapshot.docs.forEach((doc : any) => {
  const place = doc.data()
  place.ownerReference.get().then((snap : any) => {
    name.push(snap.data().name);
    console.log(names);
  })
});
console.log(names);

The first console log displays the expected data, however, the last one returns an empty object. I understand this is due to the asynchronous nature of promises. How can I ensure the desired value is properly assigned to this variable?

javascript typescript firebase promise google-cloud-firestore

Answer 1

Answer №1

Gather all the assurances provided by each fetch() and store them in an array. Next, utilize Promise.all() to ensure they are completed before moving forward. Finally, navigate through the resulting snapshots in the callback function.

const assurances = []
this.props.locations.snapshot.docs.forEach((doc : any) => {
    const location = doc.data()
    assurances.push(location.ownerInfo.fetch())
})

Promise.all(assurances).then(snapshots => {
    const details = []
    snapshots.forEach(snapshot => {
        details.push(snapshot.data().details)
    })
    console.log(details);  // this displays the desired information
})

Answer 2

Gather all the assurances provided by each fetch() and store them in an array. Next, utilize Promise.all() to ensure they are completed before moving forward. Finally, navigate through the resulting snapshots in the callback function.

const assurances = []
this.props.locations.snapshot.docs.forEach((doc : any) => {
    const location = doc.data()
    assurances.push(location.ownerInfo.fetch())
})

Promise.all(assurances).then(snapshots => {
    const details = []
    snapshots.forEach(snapshot => {
        details.push(snapshot.data().details)
    })
    console.log(details);  // this displays the desired information
})

retrieve data asynchronously from a Firestore reference in Firebase

Answer №1

Similar questions

JavaScript Function for Shuffling an Array

What is the best method for displaying 3 items in each row from a mapped response in ReactJS using materialize css grids or react bootstrap grids?

differentiating between user click and jquery's .click() method

What are some strategies for incorporating error handling into promise chains and design considerations for working with promises?

A guide to categorizing and tallying JSON data based on multiple keys within the past 30 days using JavaScript/jQuery

Swirling hues transforming into #000000 upon second attempt

How can API calls be efficiently made in React?

The function fails to return a true value

Working with JSON data in JavaScript is proving to be challenging

When using jQuery and AJAX together, it seems that the POST method is returning

Utilize Vue Fullcalendar's eventRender feature to seamlessly incorporate Vue components into your

consolidating express routes in one consolidated file

Is there a reason why I can't load all Google charts on one webpage?

Exploring the best practices for utilizing the error prop and CSS with the Input API in Material UI while utilizing context

Using React to update an existing array of objects with a new array containing objects of the same type

Incorporate a custom file input field and utilize jQuery to switch out the input type with a chosen image

Can you specify the nature of the clear dispatch action?

Find numbers below 100 in an array containing a mix of numbers and strings using Javascript

Utilizing Reactjs to efficiently transmit name and value to Material UI autocomplete

Steps to properly specify the Express Error Type