Angular HttpClient Subscription ... no data returned?

Question

I want to call some data from database in angular via HttpClient Methods. Then I am formatting the data for some charts. The 2 Methods are "getData" to get the data, and the other method is a dataFormatter() to format the data. I can call the data, it logs into the browser console, howerver, I cannot process that data further in my other method... why?

Somehow, I think it is a subscription problem or so, because the data is not passed along into my second method it seems.

import { Component, OnInit,NgModule } from '@angular/core';
import { Injectable } from '@angular/core';
import { catchError, map, tap } from 'rxjs/operators';
import { Http,Response} from '@angular/http';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { GeneralhttpserviceService } from '../services/generalhttpservice.service';
import { ChartdataformatterService } from '../services/chartdataformatter.service';

@Component({
  selector: 'anlagenstatus',
  templateUrl: './anlagenstatus.component.html',
  styleUrls: ['./anlagenstatus.component.scss']
})
export class AnlagenstatusComponent implements OnInit {
  private base_url = 'localhost:5555/DNZ/';
  private suff_url = 'Status/betrieb/Status';
  dataArray: any;
  chartArray: any[];
  formattedData: any;

  showXAxis = true;
  view = [1500,600];
  timeline = true;
  showYAxis = true;
  gradient = false;
  showLegend = true;
  showXAxisLabel = false;
  xAxisLabel: string = "Zeitwerte";
  showYAxisLabel = false;
  yAxisLabel: string = "Betriebswerte";
  autoScale = true;
  tooltipDisabled = false;
  colorScheme = {
    domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA']
  };

  constructor( private http: HttpClient, private genHttp: GeneralhttpserviceService, private chartFormatter: ChartdataformatterService) {   }

  ngOnInit() {
    this.formattedData= this.anlagenstatusDataFormatter();
  }


  //all HttpClient return an RxJS Observable of something
  //HttpClient.get returns the body of the response as an untyped JSON object by default. 
  //To catch errors, you "pipe" the observable result from http.get() through an RxJS catchError() operator.
  getData(suffurl: string, id? :number): Observable<any[]> {
    return this.http.get<any[]>('http://localhost:5555/DNZ/'+ this.suff_url)
    .pipe(
      map(data => data),
      tap(data => console.log("Anlagenstatus Daten:", data)),
      catchError(this.handleError('getData',[]))
    )
  }
    /*.pipe(subscribe(Response => { console.log(Response)})
      tap(data => console.log("Anlagenstatus Daten:", data)),
      catchError(this.handleError('getData',[]))      
    )*/

    anlagenstatusDataFormatter():any {   
      this.dataArray = this.getData(this.suff_url).subscribe(Response => { console.log("response:",Response)});
      console.log("Pre-Formatted data:", this.dataArray);   
      for (var elem of this.dataArray) {
        var entrydict ={ 
            name: elem["_id.Demonstrator"],
            series: [{ 
              name: elem["_id.betriebsbereit"],
              value: elem["Anzahl"]          
          }]  
        }
        this.chartArray.push(entrydict);
      } 
      console.log("Formatted Anlagenstatusdaten:",this.chartArray);
      return this.chartArray;
    }


  /**
 * Handle Http operation that failed.
 * Let the app continue.
 * @param operation - name of the operation that failed
 * @param result - optional value to return as the observable result
 */
  private handleError<T> (operation = 'operation', result?: T) {
    return (error: any): Observable<T> => {

      // TODO: send the error to remote logging infrastructure
      console.error(error); // log to console instead

      // TODO: better job of transforming error for user consumption
      console.log(`${operation} failed: ${error.message}`);

      // Let the app keep running by returning an empty result.
      return of(result as T);
    };
  }
}

edit: the return value to my variable this.dataArray is somehow of type "Subscriber"... and it seems its closed.. how can I get he right data format or subscribe again to it so that I can process the data further?

Subscriber {closed: false, _parent: null, _parents: null, _subscriptions: Array(1), syncErrorValue: null, …}
closed
:
true

Answer 1

You need to subscribe the observable and once the data is received, only then format the data by passing it to the second function.

this.getData(this.suff_url).subscribe(Response => {          
    console.log("response:",Response);
    // format the response here
});

If you want await to work, you may convert the subscription to promise using toPromise

await this.getData(this.suff_url).toPromise()