Retrieve a collection of Firebase records using a specific query parameter

I'm currently developing a web app with Angular 2 and facing an issue with retrieving data from Firebase based on specific conditions in the child node. Here's how my Firebase structure looks like: I need to extract the entry for the one with approverEmail set as [email protected] and status as 0 (both conditions must be met simultaneously).

{
  "BugList" : {
    "Company 1" : {
      "-Kbne6WxelgI6Qv9T0eP" : {
        "approverEmail" : "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a0c1d0d0d2cfd6c5d291e0cdc1c9cc8ec3cfcd">[email protected]</a>",
        "firstName" : "Jack",
        "lastName" : "Daniels",
        "noteToApprover" : "Gooday mate",
        "status" : 0,
      },
      "-Kbne6WxelgI6Qv9T0QP" : {
        "approverEmail" : "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="04657474766b726176364469656d682a676b69">[email protected]</a>",
        "firstName" : "Tom",
        "lastName" : "Riddle",
        "noteToApprover" : "Howdy",
        "status" : 1,
      }
    }
  },
}

My current approach involves using angularFire2, which lacks sufficient documentation on this particular issue. This is where I'm at right now and could use some guidance.

forms.service.ts
getPendingApproval() {
    var currentUser: User = this.userService.getCurrentUser();
    const queryList = this.af.database.list('/BugList/' + currentUser.company, {
        query: {
            // email field match currentUser.email && status == 0 
        }
    });
}

And in my app.component.ts

getList() {
    this.list = this.formsService.getPendingApproval()
  }

This is the snippet of code from my forms.service.ts

@Injectable()
export class FormsService {

    constructor(private af: AngularFire, private userService: UserService) { }

    saveToFirebase(bug: Bug) {
        const bugRef = this.af.database.list('/BugsList/' + bug.companyName);
        return bugRef.push(timesheet)
    }


    getPendingApproval() {
        var currentUser: User = this.userService.getCurrentUser();
        const queryList = this.af.database.list('/BugsList/' + currentUser.company, {
            query: {

            }
        });
    }
}

Answer №1

In order to query multiple fields, you can filter the second field after retrieving the pre-filtered list.

For example, here is a sample query:

query: {
  orderByChild: 'email', // specify field name
  equalTo: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1b6f7e686f5b6c7e79357f7e">[email protected]</a>' // search criteria
}

To filter using a Subject:

const filterSubject = new Subject(); // import {Subject} from 'rxjs/Subject';
const queryObservable = af.database.list('/items', {
  query: {
    orderByChild: 'email',
    equalTo: filterSubject
  }
});

// subscribe to changes
queryObservable
   .map(qis => qis.filter(q => q.status == 0)) // FILTER HERE FOR STATUS
   .subscribe(queriedItems => {
      console.log(queriedItems);
   });

// trigger the query
filterSubject.next('<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a0d4c5d3d4e0d7c5c28ec4c5">[email protected]</a>');

// re-trigger the query!!!
filterSubject.next('<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="224a574a5762454f434b4e0c414d4f">[email protected]</a>');

Find more information in the documentation: https://github.com/angular/angularfire2/blob/master/docs/4-querying-lists.md

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

Encountering an Error in Angular Material 8 due to the Import of the Unforeseen Directive 'MatCard'

I keep encountering the error message displayed above in the console. I am currently working with Angular Material version 8.2.3. In my app.module.ts file, I have the following import statements related to Angular Material: import { MatInputModule, MatBu ...

What is the rationale behind an Angular component needing to duplicate an object provided by a service?

As I dive into the HttpClient page within the Angular Fundamentals section, one question that comes to mind is why does the component need to clone the object received from the service handling the HTTP calls? In particular, the code block from the config ...

Passing data from ModalService to a component

Currently, I am attempting to utilize the ngx-bootstrap-modal in order to transfer data from a modal service to a modal component. While reviewing the examples, it is suggested to use the following code: this.modalService.show(ModalContentComponent, {init ...

Retrieving Information from a JSON Object using Angular 2

I'm dealing with a JSON object response. The object looks like this: {auth_token: "60a483bc0b1bc4dc0231ff0b90a67be1dad6ef45"} auth_token:"60a483bc0b1bc4dc0231ff0b90a67be1dad6ef45" proto : Object My goal is to extract the value "60a483bc0b1bc4dc0231f ...

Display the initial x list items without utilizing ngFor in Angular 2

In the template, there are 9 <li> elements, each with a *ngIf condition present. It is possible that 5 or more of them may return true, but the requirement is to only display the first 4 or less if needed. Priority is given to the order of the < ...

What is the definition of a type that has the potential to encompass any subtree within an object through recursive processes?

Consider the data structure below: const data = { animilia: { chordata: { mammalia: { carnivora: { canidae: { canis: 'lupus', vulpes: 'vulpe' } } } } }, ...

Incorporating AngularFire2 in the latest Angular 11.0.5 framework

I have been attempting to utilize Firebase as a database for my angular application. Following the guidance provided in these instructions (located on the official developers Github page), I first installed npm install angularfire2 firebase --save in my p ...

At what point do we employ providers within Angular 2?

In the Angular 2 documentation, they provide examples that also use HTTP for communication. import { HTTP_PROVIDERS } from '@angular/http'; import { HeroService } from './hero.service'; @Component({ selector: 'my-toh&ap ...

Is there a way to simulate the BeforeInstallPromptEvent for testing in Jasmine/Angular?

I'm currently working on testing a dialog component that manages the PWA install event triggered manually when a specific function is invoked. The goal is to handle the promise returned by the BeforeInstallPromptEvent.userChoice property. However, wh ...

Leveraging the Firebase email trigger extension with JavaScript

Recently, I integrated the email trigger extension for Firebase. Below is the function I am using: firestore .collection("profiledata") .doc(user.uid) .update({ accountStatus: "active", }) .then(() => { // At this p ...

"Fixing the cubic-bezier for the exiting animation ends up causing issues with the entering

Trying to implement a collapsing list animation using React/Joy-UI. Below is the Transition element code snippet: <Transition nodeRef={nodeRef} in={browseOpen} timeout={1000}> {(state: string) => (<List aria-labelledby="nav-list-bro ...

Keep the code running in JavaScript even in the presence of TypeScript errors

While working with create-react-app and typescript, I prefer for javascript execution not to be stopped if a typescript error is detected. Instead, I would like to receive a warning in the console without interrupting the UI. Is it feasible to adjust the ...

Is it possible that React.createElement does not accept objects as valid react children?

I am working on a simple text component: import * as React from 'react' interface IProps { level: 't1' | 't2' | 't3', size: 's' | 'm' | 'l' | 'xl' | 'xxl', sub ...

angular reactive form: communicate between child and parent components

Having trouble passing values from a child component to its parent in Angular's reactive forms. Any advice? Here is an example of the parent form: <div class="fields-wrap" [formGroup]="parent"> <div class="input-wrap"> <child-compon ...

Combining cells for certain entries in an Angular data table

Just starting to learn angular, and here's the scenario I'm dealing with: I have a table consisting of 10 columns. Let's say column 4 contains different status categories like children, teen, young, adult, and senior. When displaying all ...

Directive for displaying multiple rows in an Angular table using material design

I am attempting to create a dynamic datatable with expandable rows using mat-table from the material angular 2 framework. Each row has the capability of containing subrows. The data for my rows is structured as an object that may also include other sub-ob ...

Is it possible to verify if a bearer token has expired within an Angular application?

Is there a secure and efficient way to determine when a bearer token has expired in my Angular application? This is the issue I am facing: If I keep the app open in my browser, someone could potentially access sensitive information on my screen since I am ...

Change validators dynamically according to conditions

Scenario: At the start, there is a single text box named Name1, a date picker called DOB1, and a check box labeled Compare. Both Name1 and DOB1 are mandatory. When the checkbox is clicked, two new form controls are dynamically included, named Name2 and DO ...

When executing npm release alongside webpack, an error is triggered

Currently, I am following a tutorial provided by Microsoft. You can access it through this link: https://learn.microsoft.com/en-us/aspnet/core/tutorials/signalr-typescript-webpack?view=aspnetcore-3.1&tabs=visual-studio However, when attempting to run ...

When trying to create a new project using `ng new project`, the path specified was not

I'm attempting to start an angular 4 project using angular-cli on my Windows 10 operating system. I followed the instructions outlined at https://www.npmjs.com/package/@angular/cli. Currently, I am running node - 7.6.0 and npm - 5.1.0. Every time I ...