How can I retrieve the array inside the firestore document?

Question

The array doses is the one that I wanted to retrieve, however I keep getting an error that says that map is not a function. This is what it looks like in firebase:

codes to retrieve firestore data:

  useEffect(() => {
    const unsubscribe = firestore
      .collection("users")
      .doc(scanResult)
      .onSnapshot((snapshot) => {
        const arr = [];
        arr.push({
          ...snapshot.data(),
        });

        setUsers(arr);
      });

    return () => {
      unsubscribe();
    };
  }, []);

mapping the users array:

 {users && users.map((user) => (
      <li>{user.email}</li> // I could already retrieve the data that are not inside the doses array

     {/* get the doses array does not work */}
                  {users &&
                    users.doses.map((index) => {
                      <li>{index.selectedVaccine}</li>;
                    })}
    ))}

Frank van Puffelen · Accepted Answer · 2021-08-27 01:31:58Z

1

Your doses field is not an array, but a map/object. An array has numeric, sequential keys, while a map/object has string keys.

If you want to loop over the keys of the field, you can do:

Object.keys(users.doses).map((key) => {
  <li>{user.doses[key]}</li>;
})}

If you instead just want to display the selectedVaccine value of the doses field, you'd do:

<li>{user.doses.selectedVaccine}</li>;

answered Aug 27, 2021 at 1:31

Frank van Puffelen

603k85 gold badges895 silver badges869 bronze badges

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

Collectives™ on Stack Overflow

How can I retrieve the array inside the firestore document?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related