GaborH GaborH - 28 days ago 7
TypeScript Question

How to find an element of an array by id with Observable in Angular2

I decided to use Observable instead of Http promises.

That is how my Promise service looked:

export class MovieService {

movies: Movie[]
movie: Movie;
constructor(private http:Http) { }

getMovies(): Promise<Movie[]>{

return this.http.get('http://api.request.com')
.toPromise()
.then((res:Response) => res.json()['results'])

}
getMovie(id: number): Promise<Movie> {
return this.getMovies()
.then(movies => movies.find(movie => movie.id == id));

}

}


First I fetch an array of movies, and than I find a certain movie of the array by id. However when I try to do the same with Observable, I get an error notification on find: Property 'find' does not exist on type 'Movie[]'.

Here is what I tried with the Observable service:

export class MovieService {

movies: Movie[];
movie: Movie;

constructor(private http: Http) {
}

getMovies(): Observable<Movie[]> {

return this.http.get('http://api.request.com)
.map((res: Response) => res.json()['results']);
}

getMovie(id: number): Observable<Movie> {
return this.getMovies()
.subscribe(movies => movies.find(movie => movie.id == id));
}
}


How can I achieve the same functionality in my Observable service just like in my Promise service?

Answer

I suppose you should use map method instead of subscribe which returns Subscription object

export class MovieService {
  movies: Movie[];
  movie: Movie;

  constructor(private http: Http) {}

  getMovies(): Observable<Movie[]> {
    return this.http.get('http://api.request.com')
      .map((res: Response) => res.json()['results']);
  }

  getMovie(id: number): Observable<Movie> {
    return this.getMovies()
      .map(movies => movies.find(movie => movie.id == id));
  }
}

Plunker Example