Angular HTTP GET

Issue

1. I have a server running on "localhost:3000". It displays data as JSON at e.g. "localhost:300/locations".
2. My "data.service.ts" includes this code:

path: string = 'http://localhost:3000'
constructor(private http: HttpClient) { }

// Locations
getAllLocations(): Observable<Location[]> {
  let location = null;
  this.http.get(this.path + '/locations')
    .map((res => location = res))
    .catch((error: any) => Observable.throw(console.log(error)));
  return location;
}

3. In my result.component.ts I'm running this code:

constuctor(private dataservice: DataService) { }

ngOnInit() {
  console.info(this.dataservice.getAllLocations());
}

I'm expecting to get as output all Locations as JSON, instead of this the output is "null".

Does anyone have a suggestion on how to make this work properly?

UPDATE: Also tried this for the HTTP call:

getAllLocations(): Observable<Location[]> {
  this.http.get<Location[]>(this.path + '/locations')
    .pipe(
      tap(items => console.info('fetched items'))
    );  
}

The output for this code is unfortunately: "Object { _isScalar: false, source: {...}, operator: {...} }"

Solution

You have to return Observable from the service:

path: string = 'http://localhost:3000'
constructor(private http: HttpClient) { }

// Locations
getAllLocations(): Observable<Locations[]> {
  return this.http.get(this.path + '/locations').pipe(
    map((res => location = res)),
    catch((error: any) => Observable.throw(console.log(error))));
}

And subscribe to it in the component.

constructor(private dataservice: DataService) { }

ngOnInit() {
  this.dataservice.getAllLocations().subscribe(result => {
      console.log(result);
   })
}

Answered By - plvice