How to filter documents by array-contains in Firestore?

 

Step 1: Set Up Your Firebase Firestore

 

Ensure that you have Firebase set up in your project. If you haven't done so, follow these steps:

• Go to the Firebase Console.
• Click on "Get Started" and create a new project (or choose an existing one).
• In the project dashboard, select "Firestore Database" from the left menu.
• Click on "Create Database" and select "Start in Test Mode" (or "Start in Production Mode" if you want to specify security rules).

 

Step 2: Initialize Firebase in Your Project

 

First, you need to integrate Firebase into your application. Add Firebase to your web application:

• Include Firebase SDK in your index.html:

  ```html

  ```

• Initialize Firebase in your JavaScript file (e.g., app.js):

  
  // Your web app's Firebase configuration
  const firebaseConfig = {
    apiKey: "YOUR_API_KEY",
    authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
    projectId: "YOUR_PROJECT_ID",
    storageBucket: "YOUR_PROJECT_ID.appspot.com",
    messagingSenderId: "YOUR_SENDER_ID",
    appId: "YOUR_APP_ID"
  };
  
  // Initialize Firebase
  const app = firebase.initializeApp(firebaseConfig);
  const db = firebase.firestore();
  

 

Step 3: Add Documents with an Array Field to Firestore

 

Before you can filter documents with array-contains, ensure you have documents that contain an array field. Add some dummy data to Firestore:

const docRef = db.collection('users').doc('user1');

docRef.set({
  name: 'John Doe',
  hobbies: ['reading', 'hiking', 'swimming']
});

const docRef2 = db.collection('users').doc('user2');

docRef2.set({
  name: 'Jane Smith',
  hobbies: ['swimming', 'cycling']
});

 

Step 4: Query Firestore with array-contains

 

To filter documents by values inside an array, use the array-contains filter. For example, if you want to find users who have "swimming" as a hobby:

db.collection('users')
  .where('hobbies', 'array-contains', 'swimming')
  .get()
  .then((querySnapshot) => {
    querySnapshot.forEach((doc) => {
      console.log(`${doc.id} => ${JSON.stringify(doc.data())}`);
    });
  })
  .catch((error) => {
    console.error('Error fetching documents: ', error);
  });

 

Step 5: Run & Test Your Query

 

• Open your project in a web server or local server environment.
• Check the console to see if the documents are filtered correctly based on your query.

 

Step 6: Secure Your Firestore Database

 

When you're moving to production, ensure your database is secure. In the Firestore rules, modify access levels accordingly:

// Allow read/write access on all documents to any user signed in to the application
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=\*\*} {
      allow read, write: if request.auth != null;
    }
  }
}