Ionic 3 Angular 5 How fetch data and transform it to Observable in ngOnInit

Question

Hello I need to fetch data coming from API and then based on response return Observable in ngOnInit.

@Edit Basically this.dayOverViewByGroup should be fully downloaded from api when is returned in fetchChildrensData() => return Observable.of(this.dayOverViewByGroup).

@Edit2 Added code for getDayOverViewByGroupId

ngOnInit

ngOnInit() {
    const filter$: Observable<string> = this.filterControl.valueChanges.pipe(
      startWith(''),
      debounceTime(100), 
      distinctUntilChanged(),
      share()
    );
    this.dayOverViewByGroup$ = this.fetchChildrensData().pipe(
      map(days => days.map(day => (
        {
          ...day,
          filteredChildren$: filter$.pipe(this.filterFrom(day.children))
        }
      )))
    );
  }

fetchChildrensData function

 fetchChildrensData(): Observable<any[]> {
    return Observable.of(this.dayOverViewByGroup)
 }

Functions that handle API call

getChildrens(date, groupId) {
    return this.attendanceService.getDayOverViewByGroupId(date, groupId).then(
      (res1: any) => {
        let dayOverViewByGroup = res1.mobile_employee_dayoverview;
        this.dayOverViewByGroup = dayOverViewByGroup;
        this.appFunctionCtrl.dismissLoader();  
      },
      (error) => console.log('Error occured in this.attendanceService.getDayOverViewByGroupId()', error)
    );

  }

getDayOverViewByGroupId(currentDate = null, groupId) {
    let that = this;
    return new Promise((resolve, reject) => {
      that.wsseGenerator.getWSSEHeader().then(header => {
        header.append('Access-Control-Allow-Origin', '*');
        header.append('Access-Control-Allow-Methods', 'POST, GET, OPTIONS, PUT');
        let options = new RequestOptions({ headers: header });
        let paramsData = {
          groupId: groupId,
          currentDate: currentDate
        };
        let params = that.serializeObject(paramsData);
        that.http.post(`${that.baseUrl}/dayoverview?${params}`, null, options).timeout(this.timeTimeout).subscribe((success: any) => {
          resolve(success);
        }, (err) => {

          this.appFunctionCtrl.dismissLoader();
          if (err.name == 'TimeoutError') {
            this.alert.present();
          }
          else {
            reject(err);
          }
        });
      });
    });
  }

Answer 1

You should return an Observable from your Service that doesn't throw any errors so you can directly use the AsyncPipe in you Component to subscribe (Also see: Why handle errors with catchError and not in the subscribe error callback in Angular).

Convert Api calls that you can't change and return Promises to Observables with from and use RxJS operators from then on (I'm presuming this.wsseGenerator.getWSSEHeader() is such a call).

Use switchMap to map to a different Observable, pluck or map to extract / transform returned data, catchError to do things on errors and return an Observable that doesn't throw any errors, finalize to do things when your Observable errors or completes.

In your Service:

import { Observable } from "rxjs";
import { switchMap, map, timeout, catchError, finalize } from "rxjs/operators";

getDayOverViewByGroupId(currentDate = null, groupId): Observable<any> {
  return Observable.from(this.wsseGenerator.getWSSEHeader()).pipe( // use from to convert Promise to Observable
    switchMap(header => {
      header.append('Access-Control-Allow-Origin', '*');
      header.append('Access-Control-Allow-Methods', 'POST, GET, OPTIONS, PUT');
      let options = new RequestOptions({ headers: header });
      let paramsData = {
        groupId: groupId,
        currentDate: currentDate
      };
      let params = that.serializeObject(paramsData);
      // map to your http request
      return this.http.post(`${that.baseUrl}/dayoverview?${params}`, null, options);
    }),
    map(this.getRelevantData), // get relevant data from http response
    timeout(this.timeTimeout),
    catchError(error => { // handle errors and return an Observable that doesn't error
      console.log('Error occured in this.attendanceService.getDayOverViewByGroupId()', error);
      if (error.name == 'TimeoutError') {
          this.alert.present();
      }
      // you have to think about what default value you want to return on errors, null can be ok
      return Observable.of(null); 
    }),
    finalize(() => this.appFunctionCtrl.dismissLoader()) // do stuff on error and complete
  );
}

private getRelevantData(response): any { // <-- don't return 'any' in your real code, create interfaces to type your data if you can
  let dayOverViewByGroup = response.mobile_employee_dayoverview;
  dayOverViewByGroup.forEach(element => {
    // do your thing
  }
  console.log('dayOverViewByGroup', dayOverViewByGroup)
  return dayOverViewByGroup;
}

In your Component:

ngOnInit() {
  this.dayOverViewByGroup$ = this.attendanceService.getDayOverViewByGroupId( .. ).pipe( 
    // If the Observable from your service can emit 'null' and you do
    // map(days => days.map(..)) you will get an error 
    // so you might have to handle this case here

    // 1. Option: filter out 'null' and 'undefined' values before your 'map' and don't emit anything
    filter(Boolean)

    // 2. Option: handle 'null' and 'undefined' in your map function
    map(days => {     
      if (days) {
        days.map( .. )
      } else {
        // do something else or don't do anything at all, i.e. remove the else case
      }
    })
  )
}