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

Leveraging Angular's catchError method to handle errors and return

Is it possible for the filter with the new date() function to accept formats other than yyyy-mm-dd?

Tips on reusing the next-auth initFirestore object to retrieve additional information from Firestore

Customizable JSX Attributes for Your TSX/JSX Application

ES5 approach to Angular2 HTTP Providers (not TypeScript)

"Convert a date string to a date object using the verbose moment date

Show just a single error message if there are two validation errors present

Is it recommended to keep Angular properties private and only access them through methods?

Extending parent context in dependencies through OOP/Typescript as an alternative to using "extends"

Reading JSON in Spring Boot can sometimes be challenging, especially when faced with errors like "Cannot deserialize value of type `X` from Array value." This error typically occurs when trying to parse an array value

Angular reloads content when language is switched

Understanding Angular 2 Testing: The Ultimate Guide to Implementing Async Function Calls

Refresh a Google chart without having to reload the entire page

Update the component following a modification to the orientation of the object

How to Establish an Angular Global Variable

I am attempting to store the primary array in local storage, but unfortunately, the value is not being saved within the React context API

Using string interpolation within the onclick event (Ionic 2 + Angular 2)

Creating Reactive Form Validators in Angular 5: Implementing a Custom Validator to Compare Two Form Controls

Tips on assigning a selected option value to the upload file

Angular 2 wrap-up: How to seamlessly transfer filter data from Filter Component to App Component