Getting all documents in collection in Firebase - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to get a reference to the collection named 'users'.

Firebase

const usersCollection = firestore.collection([1]);

Drag options to blanks, or click blank then click option'

A"users"

Busers

C'user'

D'users'

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting quotes around the collection name.

Using the wrong collection name.

The collection name must be a string. Using quotes around 'users' is correct.

2fill in blank

medium

Complete the code to fetch all documents from the 'users' collection.

Firebase

const snapshot = await usersCollection.[1]();

Drag options to blanks, or click blank then click option'

Aget

Bfetch

Cretrieve

DgetDocs

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'getDocs' which is from Firebase v9 modular syntax, not the older syntax.

Using 'fetch' which is not a Firestore method.

The correct method to fetch all documents from a collection in Firebase Firestore is get().

3fill in blank

hard

Fix the error in the code to loop through all documents in the snapshot.

Firebase

snapshot.forEach(doc => [1](doc.data()));

Drag options to blanks, or click blank then click option'

Aprint

Blog

Cconsole.log

Dshow

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'print' which is not a JavaScript function.

Using 'log' without 'console'.

To print data to the console in JavaScript, use console.log.

4fill in blank

hard

Fill both blanks to create a map of document IDs to their data.

Firebase

const dataMap = {};
snapshot.forEach(doc => {
  dataMap[doc.[1]] = doc.[2]();
});

Drag options to blanks, or click blank then click option'

Aid

Bdata

CgetId

DgetData

Attempts:

3 left

💡 Hint

Common Mistakes

Using methods like 'getId' or 'getData' which do not exist.

Confusing properties and methods.

Each document has an id property and a data() method to get its data.

5fill in blank

hard

Fill all three blanks to filter documents with age greater than 18 and map their names.

Firebase

const adults = snapshot.docs
  .filter(doc => doc.data().[1] [2] [3])
  .map(doc => doc.data().name);

Drag options to blanks, or click blank then click option'

Aage

B>

C18

Dname

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong field name.

Using the wrong comparison operator.

We filter documents where the 'age' field is greater than 18, then map to get their 'name'.

Practice

1. What does the getDocs function do in Firebase when used with a collection reference?

easy

A. It creates a new document in the collection.

B. It deletes all documents in the collection.

C. It updates all documents in the collection.

D. It fetches all documents from the specified collection.

Solution

1. Step 1: Understand the purpose of getDocs

   The getDocs function is designed to retrieve documents from a collection in Firebase.

2. Step 2: Identify the correct action

   Using getDocs with a collection reference returns all documents inside that collection.

3. Final Answer:

   It fetches all documents from the specified collection. -> Option D

4. Quick Check:

   getDocs fetches documents = A [OK]

Hint: Remember: getDocs reads all documents in a collection [OK]

Common Mistakes:

• Confusing getDocs with delete or update functions
• Thinking getDocs creates documents
• Assuming getDocs fetches a single document

2. Which of the following is the correct syntax to get all documents from a collection named users in Firebase?

easy

A. const querySnapshot = await getDocs(collection(db, 'users'));

B. const querySnapshot = getDocs('users');

C. const querySnapshot = await getDocs('db.users');

D. const querySnapshot = collection(db, 'users').getDocs();

Solution

1. Step 1: Identify correct function usage

   The getDocs function requires a collection reference, which is created by collection(db, 'users').

2. Step 2: Check for correct async usage

   Since getDocs returns a promise, it should be awaited with await.

3. Final Answer:

   const querySnapshot = await getDocs(collection(db, 'users')); -> Option A

4. Quick Check:

   Correct syntax uses await and collection() [OK]

Hint: Use await getDocs(collection(db, 'collectionName')) [OK]

Common Mistakes:

• Passing collection name as string directly to getDocs
• Calling getDocs as a method on collection()
• Missing await for async call

3. Given the following code snippet, what will be logged to the console?

const querySnapshot = await getDocs(collection(db, 'products'));
querySnapshot.forEach((doc) => {
  console.log(doc.id, doc.data());
});

medium

A. Nothing, because getDocs does not return documents.

B. Only the IDs of documents in the 'products' collection.

C. Each document's ID and its data object from the 'products' collection.

D. An error because forEach is not a function on querySnapshot.

Solution

1. Step 1: Understand getDocs return value

   The getDocs function returns a QuerySnapshot containing documents.

2. Step 2: Loop through documents with forEach

   The forEach method iterates over each document snapshot, allowing access to doc.id and doc.data().

3. Final Answer:

   Each document's ID and its data object from the 'products' collection. -> Option C

4. Quick Check:

   forEach logs id and data = D [OK]

Hint: Use forEach on querySnapshot to access each document [OK]

Common Mistakes:

• Thinking forEach is not available on querySnapshot
• Expecting only IDs without data
• Assuming getDocs returns a single document

4. What is wrong with this code snippet that tries to get all documents from the orders collection?

const ordersRef = collection(db, 'orders');
const snapshot = getDocs(ordersRef);
snapshot.forEach(doc => console.log(doc.id));

medium

A. Missing await before getDocs, so snapshot is a Promise, not data.

B. Using collection() incorrectly; it should be collection('orders', db).

C. forEach is not a valid method on snapshot.

D. doc.id does not exist on document snapshots.

Solution

1. Step 1: Check async usage of getDocs

   The getDocs function returns a Promise, so it must be awaited to get the snapshot.

2. Step 2: Understand consequences of missing await

   Without await, snapshot is a Promise object, which does not have a forEach method, causing an error.

3. Final Answer:

   Missing await before getDocs, so snapshot is a Promise, not data. -> Option A

4. Quick Check:

   Always await getDocs to get data [OK]

Hint: Always await getDocs to get actual documents [OK]

Common Mistakes:

• Forgetting to await getDocs
• Incorrect order of parameters in collection()
• Assuming forEach works on Promise

5. You want to get all documents from the tasks collection but only log the documents where the field completed is true. Which code snippet correctly does this?

hard

A. const querySnapshot = await getDocs(collection(db, 'tasks'));
querySnapshot.forEach(doc => {
if (doc.completed === true) {
console.log(doc.id, doc.data());
}
});

B. const querySnapshot = await getDocs(collection(db, 'tasks'));
querySnapshot.forEach(doc => {
if (doc.data().completed === true) {
console.log(doc.id, doc.data());
}
});

C. const querySnapshot = await getDocs(collection(db, 'tasks'));
querySnapshot.forEach(doc => {
if (doc.data.completed) {
console.log(doc.id, doc.data());
}
});

D. const querySnapshot = await getDocs(collection(db, 'tasks'));
querySnapshot.forEach(doc => {
if (doc.data('completed') === true) {
console.log(doc.id, doc.data());
}
});

Solution

1. Step 1: Access document data correctly

   Use doc.data() to get the document's data object, then check the completed field.

2. Step 2: Filter documents by completed field

   Check if doc.data().completed === true before logging the document.

3. Final Answer:

   Code snippet that checks doc.data().completed === true and logs matching docs. -> Option B

4. Quick Check:

   Use doc.data() to access fields [OK]

Hint: Check fields inside doc.data() for filtering [OK]

Common Mistakes:

• Trying to access fields directly on doc instead of doc.data()
• Using incorrect syntax like doc.data.completed
• Passing field name to doc.data()