mardi 10 mars 2020

I am trying to fetch data from firestore and then convert the data into an array. the new array should be an observable

I have a service where i have written a method to fetch data from friestore.

the method needs to return a observable. The data is then converted and stored in another variable. I want to create an observable of the updated variable. How can i go about it.

I have tried creating observer using Subjects, ReplaySubjects and observables but i guess i am missing something. But i get this errors :

core.js:5847 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'asObservable' of undefined

and

core.js:5847 ERROR TypeError: Cannot read property 'next' of undefined the following is the code.

import { BehaviorSubject, Observable, of, Subscriber, ReplaySubject, Subject} from 'rxjs';

export class ProductsService {

  public List : Product[] = [];
  public productListObservable :  Subject<Product[]>;

  private products(): Observable<Product[]> {

      //returns an observable of type Product[]

      this.firestoreService.getProductsList().subscribe((doc) =>{

        //Fetch data from firestore and 
        //create the new list with updated id's

        this.List = doc.docs.map(prodItem =>{
          let x = prodItem.data()
          let test = {};
          test['id']=prodItem.id;
          test['name'] = x['ProductName'];
          test['category'] = x['ProductCategory'];
          test['tags']= x['ProductTags'];
          test['specs'] = x['ProductSpecs'];
          test['inclusions'] = x['ProductInclusion'];
          test['shortDetails'] = x['ProductShortDetails'];
          test['description'] = x['ProductDescription'];
          test['pictures'] = x['ProductImages'];

          return test;
        })
        this.productListObservable.next(this.List);
     })

    return this.productListObservable.asObservable();

  }


public getProducts(): Observable<Product[]> {
    //var test = this.products();
    //test.subscribe(x =>{
    //  console.log(x);
    //})
    return this.products();
  }

In Component.html

   ngOnInit() {
    this.productsService.getProducts().subscribe(product => this.products = product);
  }



Aucun commentaire:

Enregistrer un commentaire