Firebase 9 Firestore GET ALL DOCUMENTS Data From A Collection
Tags: javascript, webdev, beginners, firebase
Published: 2022-07-25 11:59:02

---
canonical_url: https://softauthor.com/firebase-firestore-get-documents-data-in-collection/
---

Learn how to **get all the documents** data from a **collection** in **Firebase version 9 Cloud Firestore** Database using the **getDocs()** method.

- Get All Documents From A Collection → _you’re here_
- [Get Document By ID](https://softauthor.com/firebase-firestore-get-document-by-id/)

The **Firestore Database** has a **cities** collection that has four **documents** in it like the screenshot below.

![alt text](https://softauthor.com/wp-content/uploads/2022/06/Firebase-9-Firestore-GET-ALL-DOCUMENTS-Data-From-A-Collection-1-1024x497.png)

**Import Firestore** Database and de-structure **three methods** that are:

- **getFirestore()** → Firestore Database
- **doc()** → It takes references of database and collection that we need to get the data from.
- **getDocs()** → It gets data from collection based references mentioned in the doc() method.

```JavaScript
import { getFirestore, doc, getDocs } from https://www.gstatic.com/firebasejs/9.8.4/firebase-firestore.js";
```

>_The import statement uses the CDN version of the Firebase SDK in this example._

**Initialize** Firestore Database

```JavaScript
const db = getFirestore();
```

The **getDocs()** method takes a single argument which is the **doc()** method.

Two of the arguments of **doc()** method

- Database → **db**
- Collection name → **cities** in this case (see the screenshot above)

Call the **doc()** method and pass **two arguments** and assign it to a constant called **colRef** (_short form for collection reference_).

```JavaScript
const colRef = collection(db, "cities");
```

Invoke the **getDocs()** method passing **colRef** as an argument to it.

The **getDocs()** method will return a **promise**, add **await** keyword in front of it.

Assign it to a constant called **docsSnap** (_short form for documents snapshot_).

```JavaScript
const docsSnap = await getDocs(colRef);
```

To see each document from the **cities** collection, loop through the **docsSnap** object using the **forEach()** method.

```JavaScript
docsSnap.forEach(doc => {
    console.log(doc.data());
})
```

The **forEach()** method takes a function as an argument with the parameter called **doc**.

>_Note: The parameter doc has nothing to do with the doc() method mentioned above._

The **doc** parameter will **get a document** from **docsSnap** on each iteration.

To get the actual **document data**, call the **data()** method on the **doc** object.

![alt text](https://softauthor.com/wp-content/uploads/2022/06/Firebase-9-Firestore-GET-ALL-DOCUMENTS-Data-From-A-Collection-2-768x347.png)

To get the **id** of a **document**, access the **id** property on the **doc** object.

```JavaScript
docsSnap.forEach(doc => {
    console.log(doc.id);
})
```

![alt text](https://softauthor.com/wp-content/uploads/2022/06/Firebase-9-Firestore-GET-ALL-DOCUMENTS-Data-From-A-Collection-3.png)

To catch any **client-side error**, wrap the **await** code with try catch block.

```JavaScript
try {
    const docsSnap = await getDocs(colRef);
    docsSnap.forEach(doc => {
        console.log(doc.data());
        console.log(doc.id);
    })
} catch (error) {
    console.log(error);
}
```

One of the ways you can check to see if the we have any document in the collection before going further.

```JavaScript
try {
    const docsSnap = await getDocs(colRef);
    if(docsSnap.docs.length > 0) {
       docsSnap.forEach(doc => {
          console.log(doc.data());
          console.log(doc.id);
       })
    }
} catch (error) {
    console.log(error);
}
```