Execute a query in Firestore with a "where" filter

I am trying to filter and retrieve specific items based on the categoryID using the "where" method and the "==" operator.

In my Firestore collection named "task", each user has a document with an array of different tasks. Here is the structure: Click here for image

This is how I add tasks to the task collection for a user:

const addToFirebase = async() => {
    if(dataFetch) {
      await setDoc(doc(db, "task", `${firebase.auth().currentUser.uid}`), {
        tasks: tasks
      }, {merge: true});
    }
  }

I have attempted to create a query to retrieve filtered tasks, but it is not working as expected:

 const getFilteredTasks = async() => {
    const collectionRef = collection(db, "task", `${firebase.auth().currentUser.uid}`, "tasks");
    const q = query(collectionRef, where("categoryID", "==", item.id));

    console.log('outside snapshot')
    console.log(item.id)

    const querySnapshot = await getDocs(q);
    querySnapshot.forEach((doc) => {
      console.log(doc.data());
      console.log('inside snapshot')
    });
  }

When I call the above function, it logs "outside snapshot" and the correct item.id, which is the categoryID for each task, but it does not log the doc.data() and "inside snapshot".

Answer №1

It appears from the screenshot provided that each user has a single document containing all their tasks, rather than each task being a separate document in a collection. In order to retrieve and manipulate this data, you can fetch the document and then extract the relevant information using client-side code:

const fetchTasksByCategory = async () => {
  const docReference = doc(database, 'tasks', `${firebase.auth().currentUser.uid}`);
  const snapshot = await getDoc(docReference);
  const userData = snapshot.data();
  if (!userData) {
    return [];
  } else {
    return userData.tasks.filter(task => task.categoryID === selectedCategory.id);
  } 
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Does TypeGraphQl have the capability to automatically format SQL queries?

I am utilizing TypeORM in conjunction with TypeGraphQL. I am curious about the SQL query result that TypeGraphQL provides. For instance, if I have a User Table with numerous columns and a simple resolver like this: @Resolver() class UserResolver { @Q ...

Choose the DIV element based on its data attribute using JSON

When using each(), my goal is to: Hide all divs where the data-infos.grpid = $jQuery(this).data('infos').grpid Show the next div where data-infos.ordre = $jQuery(this).data('infos').next_ordre I am unsure how to apply a "where" ...

Using JavaScript drag and drop feature to remove the dragged element after a successful drop operation

Trying to figure out how to remove a dragged element from the DOM after a successful drop using the native JavaScript drag and drop API. After attempting to listen for the drop event, it seems that it only fires on the element being dropped onto and does ...

Invoking a Node.js function using a URL reference

Is there a way to call a function located in a remote URL? I have the page URL and the function name. The server-side application is running on NodeJs Express, and the function structure is as follows: function executer(param1, param2){ //logic re ...

HTML steps for smooth scrolling to the top and bottom of a list

My HTML contains a vertical list with top and bottom arrows positioned nearby. I am looking to implement a function where clicking on the top arrow will move the list up gradually, and clicking on the bottom arrow will move the list down step by step. Belo ...

What could be causing the issue of messages not displaying while incorporating connect-flash with res.locals in express.js and ejs templating?

Here are some snippets of code that may be useful. Connect-flash is designed to display messages on test1 and test2, but there seems to be an issue with displaying messages for test 3: user registration when all three tests are redirected to the same &apos ...

What is the best way to restrict the input year on @mui/x-date-pickers to a certain range?

Is there a way to restrict the input year range when using @mui/x-date-pickers? I want to limit it from 1000 to 2023 instead of being able to enter years like 0000 or 9999. https://i.stack.imgur.com/0p6j3.jpg I have tried adding a mask to InputProps in my ...

"The incredible power of the spread operator in conjunction with EsLint

Is there a way to duplicate an object and modify one of its properties? Here's an example: const initialState = { showTagPanel: false, }; export default function reducerFoo(state = initialState, action) { switch(action.type) { case types.SH ...

Touchwipe incorporation - single-page website script

Today has been dedicated to troubleshooting and searching for a solution regarding the integration of TouchWipe () on a custom one-page-site script based on Parallax that I found perfect for my latest project (). The script itself performs beautifully wit ...

React - Issue with Input event handling when utilizing both onChange and onKeyDown functions

I was attempting to create a feature similar to a multi-select, where users could either choose a value from a list or enter a new value. The selected value should be added to an array when the user presses the enter key. To monitor changes in the input ...

PHP - Implementing a Submit Button and Modal Pop-up AJAX across multiple browsers in PHP

As a newbie in PHP AJAX coding, I'm facing a challenge with having two browsers. My goal is to click the submit button on one browser and have a modal popup on the other browser simultaneously. Essentially creating a chat system where only a button an ...

Initiating Firebase Configuration

Currently, I have integrated Firebase as the back-end for my app. Here is how my firebase configuration looks: const firebaseConfig = { apiKey: 'xx', authDomain: "xx", databaseURL: "xx", ...

determining the quantity of dates

Is there a way to calculate the number of a specific day of the week occurring in a month using AngularJS? For example, how can I determine the count of Saturdays in a given month? Thank you. Here is the code snippet I have been working on: <!doctype ...

Having trouble updating the DataTable with extra details retrieved from a new URL

I'm currently utilizing the DataTable plugin. After loading the DataTable, my aim is to reload the table, while keeping the existing content intact, and adding information gathered from a separate json file. However, I'm encountering an issue wh ...

Toggle the hamburger menu using JavaScript

How can I close my hamburger menu when clicking a link for one page navigation? The menu is functioning properly, but I need a way to close it. Unfortunately, I have limited knowledge of JS. I only have the HTML and CSS for this: HTML in index.html file ...

Deactivating controls while displaying the loading bar in AngularJS

I'm currently working on a web application using AngularJS. I want to incorporate a loading bar to signify long data load times from the server. To replicate heavy data loads, I am utilizing $timeout to trigger the loadbar when the operation begins a ...

Upon refreshing the page, nested React routes may fail to display

When I navigate to the main routes and their nested routes, everything works fine. However, I encounter an issue specifically with the nested routes like /register. When I try to refresh the page, it comes up blank with no errors in the console. The main r ...

Creating a Server-Side Rendered application from scratch

Currently, we are in the process of developing a Nuxt application using npm run generate and deploying it as a Static Site Generator (SSG). However, an issue has arisen where the application is being built as a Client-Side Rendered (CSR) app instead of Ser ...

When PHP echo of json_encode triggers an error, AJAX status 200 will be raised

Despite everything running smoothly in the program below, an AJAX error is triggered: javascript: var data = { email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="026f6742656f636b6e2c616d6f">[email protect ...

How can I keep a div open when the mouse hovers over it, and then close it when the mouse

My current markup looks like this: <div class="wrapper-header"> <div class="container"> <div class="navbar"> <ul class="nav navbar-nav"> <li class=""><a href="#" class="toggle">Show Categories</a></li> </ ...