Angular - HttpClient: Map Get method object result to array property

You can simply .map() your http call, which is an Observable, to return the data type that you want.

findAllShows(): Observable<Show[]> {    return this.http        .get(`${someURL}/shows`)        .map(result=>result.shows)}

Your httpClient.get() should return an Observable, which you have explicitly stated it thought Observable<Show[]>. You .map() is an operator that transform the observable into a new one.

More on .map() operator: http://reactivex.io/documentation/operators/map.html

Update:

For RXJS version 6 and above, simply use .pipe() to pipe the .map() operator:

findAllShows(): Observable<Show[]> {    return this.http        .get(`${someURL}/shows`)        .pipe(map(result=>result.shows))}

Latest HttpClient which should be used instead of http has no map method. You should first import it by import { map } from 'rxjs/operators';Then you should use it this way:

this.http.get(`${someURL}/shows`).pipe(        map(res => res['shows'])    )

Thanks All,I was able to find solution by combining responses from @ Arun Redhu by providing a transfer object interface that the server sends back. Then solution provided by @CozyAzure by using the .map() to transform one Observable to the correct Observable Show[].

Full Solution below for those interested.

import {Observable} from 'rxjs/Observable';import {Contact} from '../models/show';import {environment} from '../../../environments/environment';// Use the new improved HttpClient over the Http// import {Http, Response} from '@angular/http'; import {HttpClient} from '@angular/common/http';// Create a new transfer object to get data from serverinterface ServerData {  shows: Show[];}@Injectable()export class ShowsService {  constructor(private http: HttpClient ) { }// want Observable of Show[]  findAllShows(): Observable<Show[]> {      // Request as transfer object <ServerData>    return this.http      .get<ServerData>(`${apiURL}/shows`)     // Map to the proper Observable I need       .map(res => <Show[]>res.shows);   }}

All great now!!! Thanks . So depending on data returned I can either use directly or map to proper Observable I need.