CODEWITHSUNDEEP
angularrxjs6
Ravioli87
Ravioli87

Reputation: 835

Rxjs6 from rxjs5: Handling Observables in REST API method

I am brand-spanking new to rxjs and Angular, and I've just discovered (thanks to my WebStorm giving me tons of red error messages) that rxjs5 is way different from version 6.

So I'm following this tutorial, which guides users through assembling the API service with rxjs. The problem is, it's written for version 5.

Here is a sample API route written in version 5:

public getAllTodos(): Observable<Todo[]> {
  return this.http
   .get(API_URL + '/todos')
   .map(response => {
     const todos = response.json();
     return todos.map((todo) => new Todo(todo));
   })
   .catch(this.handleError);
}

After reading the documentation, I've gotten the version 6 route re-written to this point:

public getAllTodos(): Observable<Todo[]> {
  return this.http
   .get(API_URL + '/todos')
   .pipe(
     map(response => {
      return response.map((todo) => new Todo(todo));
     }),
     catchError(this.handleError)
  );
}

The problem is, I'm getting:

Property 'map' does not exist on type 'Object'.

I am guessing this has to do with the response not being in json format, although the response does not seem to have a .json() method.

Upvotes: 0

Views: 254

Answers (1)

Simon K
Simon K

Reputation: 2857

The reason you have an error is that if you don't specify the type of your response variable, it is assumed to be an Object. As map is an array function, you need to specify the type of your response to be an array:

this.http.get<any[]>(...).pipe(...); // Preferred

or:

this.http.get(...).pipe(map((response: any[]) => ...)...);

Note that you should replace any in the above with the actual type that is being returned from your API (string, object, etc.).

Upvotes: 2

Related Questions