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>
        );
    }

Renaud Tarnec · Accepted Answer · 2019-04-25 10:33:09Z

1

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);
  });

edited Apr 25, 2019 at 10:33

answered Apr 25, 2019 at 10:17

Renaud Tarnec

83.4k10 gold badges99 silver badges130 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Anil Over a year ago

But this returns persons array for every object. And also what if I use getPeoples() function to return the persons array? just like const persons = getPeoples();.

Anil Over a year ago

Can I create something like Person model class and create array of objects of the Person class in reactjs? If yes, Can you please help me

score 0 · Accepted Answer · 2019-04-25 14:22:52Z

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.

Collectives™ on Stack Overflow

Parsing firebase query data in reactjs

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related