Angular HTTP GET

Question

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: {...} }"

Answer 1

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);
   })
}

Answer 2

Did you know that HttpClient#get returns an Observable? You can just return the get method in your method.

Secondly, you can set an interface to the method so that it'll return the JSON as typed.

Lastly, you can use template literals in your API URL.

/**
 * Retrieves a list of locations.
 * (TODO: Add better documentation here)
 */
getAllLocations(): Observable<Location[]> {
  return this.http.get<Location[]>(`${this.path}/locations`);
}

You can then handle this in the actual component that calls this method:

constuctor(private dataservice: DataService) { }

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