Parsing firebase query data in reactjs

Question

I am using firebase cloud firestore for storing data. And I am developing a web app using reactjs. I have obtained documents using the following function:

getPeoples() {
        let persons = [];
        firestore.collection("students")
            .get()
            .then(function (querySnapshot) {
                querySnapshot.forEach((doc) => {
                    var person = {};
                    person.name = doc.data().Name;
                    person.course = doc.data().Course;
                    persons.push(person);
                })
            });
        console.log(persons);
        return persons;
    }

I am getting the desired data, but when I am iterating through persons array, it says it has length of 0.

here is the console output when I am displaying complete persons array and its length.

The length should be 14, but it shows 0. Please correct me what is wrong with me?

I want to display the output in the html inside the render() method of react component.

The output of

 const peoples = this.getPeoples();
        console.log(peoples);

It is:

The complete render method looks like:

render() {
        const peoples = this.getPeoples();
        console.log(peoples);
        return (
            <div className="peopleContainer">
                <h2>Post-Graduate Students</h2>
                {/* <h4>{displayPerson}</h4> */}
            </div>
        );
    }

Answer 1

I'm not sure but please try to update your

 getPeoples() {
    let persons = [];
    firestore.collection("students")
        .get()
        .then(function (querySnapshot) {
            querySnapshot.forEach((doc) => {
                var person = {};
                person.name = doc.data().Name;
                person.course = doc.data().Course;
                persons.push(person);
            })
        });
    console.log(persons);
    return persons;
}

to

getPeoples() {
    let persons = [];
    firestore.collection("students")
        .get()
        .then(querySnapshot => {
            querySnapshot.forEach((doc) => {
                persons.push({name = doc.data().Name,
                course = doc.data().Course
            })
        });
    console.log(persons);
    return persons;
}

Update

Sorry I thought you have problem with filling persons array in your function. Anyway as Renaud mentioned the query in your function is asynchronous so the result is not quick enough to be displayed on render. I use similar function and I found redux the best way to handle this situations.

Answer 2

This is due to the fact the query to the database is asynchronous and you are returning the persons array before this asynchronous task is finished (i.e. before the promise returned by the get() method resolves).

You should return the persons array within the then(), as follows:

getPeoples() {
        let persons = [];
        return firestore.collection("students")
            .get()
            .then(function (querySnapshot) {
                querySnapshot.forEach((doc) => {
                    var person = {};
                    person.name = doc.data().Name;
                    person.course = doc.data().Course;
                    persons.push(person);
                })
                console.log(persons);
                return persons;
            });
    }

And you need to call it as follows, because it will return a promise :

  getPeoples().then(result => {
    console.log(result);
  });

Have a look at what is written to the console if you do:

  console.log(getPeoples());

  getPeoples().then(result => {
    console.log(result);
  });