I am facing difficulty in retrieving data from Firestore using Angular

Question

I am facing difficulty in retrieving data from Firestore using Angular

I've been utilizing the AngularFireList provided by @angular/fire/database to retrieve data from firestore. However, despite having data in the firestore, I am unable to fetch any information from it.

import { Injectable } from '@angular/core';
import { AngularFireDatabase, AngularFireList, AngularFireObject } from '@angular/fire/database';
import { Customer } from '../shared/customer.model'; 

@Injectable({
  providedIn: 'root'
})
export class CustomerService {

customersRef: AngularFireList<any>;    // Reference to Student data list, which is an Observable
customerRef: AngularFireObject<any>;   // Reference to Student object, also an Observable


// Injecting AngularFireDatabase Dependency in Constructor
constructor(private db: AngularFireDatabase) { }

getCustomersList() {
   this.customersRef = this.db.list('customers');
   return this.customersRef;
}


 getCustomer(id: string) {
   this.customerRef = this.db.object('customers/' + id);
   return this.customerRef;
}}

angular typescript google-cloud-firestore

Answer 1

Answer №1

When working with Angular and making http calls on observable objects or methods, you must remember to use the .subscribe() method. Here is an example in your code:

fetchProductsList() {
   this.apiService.get('products').subscribe(products => {
      this.productsList = products;
      console.log(products) //to see the received data
    });
   return this.productsList;
}

Answer 2

When working with Angular and making http calls on observable objects or methods, you must remember to use the .subscribe() method. Here is an example in your code:

fetchProductsList() {
   this.apiService.get('products').subscribe(products => {
      this.productsList = products;
      console.log(products) //to see the received data
    });
   return this.productsList;
}

Answer 3

Answer №2

There's no requirement to store values in a declarative manner within the service. Simply return them like so:

getCustomersList(): Observable<AngularFireList<any>> {
   return this.db.list('customers');
}

getCustomer(id: string): Observable<AngularFireObject<any>> {
   return this.db.object('customers/' + id);
}

In a component or another abstraction where you wish to utilize this stream, you can do the following:

const customer$ = this.service.getCustomer();
customer$.subscribe((customer)=>console.log(customer))

Alternatively, in an HTML template:

<div>{{customer$ | async}}

However, remember to create a field

customer$: Observable<AngularFireObject<any>> = service.getCustomer();

Answer 4

There's no requirement to store values in a declarative manner within the service. Simply return them like so:

getCustomersList(): Observable<AngularFireList<any>> {
   return this.db.list('customers');
}

getCustomer(id: string): Observable<AngularFireObject<any>> {
   return this.db.object('customers/' + id);
}

In a component or another abstraction where you wish to utilize this stream, you can do the following:

const customer$ = this.service.getCustomer();
customer$.subscribe((customer)=>console.log(customer))

Alternatively, in an HTML template:

<div>{{customer$ | async}}

However, remember to create a field

customer$: Observable<AngularFireObject<any>> = service.getCustomer();

I am facing difficulty in retrieving data from Firestore using Angular

Answer №1

Answer №2

Similar questions

Angular 2: Simplifying the Process of Retrieving a Full Address Using Latitude and Longitude

What is the reason behind document.body not being recognized as an HTMLBodyElement?

Return to the previous page with different query parameters, not the same one

The beta version of Angular 2.0 introduces the BrowserDomAdapter for easy access to the DOM

TypeScript encountered an error with code TS2554, indicating that it was expecting 0 arguments but instead received 1 in an Ionic application

Did not adhere to regulations

What is the best approach to repurpose a jest test for various implementations of a shared interface?

Troubleshooting the Angular 7 mat-select issue caused by the "ellipsis" CSS property with three dots

Angular version 2 and above pipe as well as material tooltip

Exploring deep within the layers to reach a component in Angular

Passing RxJs pipes as a parameter

An analysis of Universal Angular.io and Prerender.io from the viewpoint of Googlebot

Using Typescript and Next.js to handle error messages returned from Axios responses

Troubleshooting Next.js Route Redirect Failure to Origin URL

What is the best way to access an object's property within a loop?

Using `querySelector` in TypeScript with Vue 3

Unable to create property within array in model

There is an issue with the Hook call on the component list map in ReactJS

Steps for inserting an additional header in an Angular table

Unable to retrieve field values from Firestore if they are numeric rather than strings