The observed map function does not work (Angular2, http)

Question

Update

The problem is that the card function does not start with a failure request. This means that if the API I'm talking to returns a 422 Validation Failed error (or other 4xx errors), then Angular will see this as a failure and force Observer to launch the signed error callback, skipping the map function in the process.

Is it possible to get Angular to handle certain 4xx errors as successful requests, or make the map function work even when Observable returns an error?

---

I have the following code running in my Angular2 application:

 import {Injectable} from "angular2/core"; import {Observable} from "rxjs/Rx"; import {Http, Headers, ResponseOptions, Response} from "angular2/http"; import 'rxjs/add/operator/map'; ... public login (email : string, password : string) { return this.http.post(_endPoint + '/auth/login/', JSON.stringify({ email: email, password: password }), { headers: new Headers({ 'Content-Type': 'application/json' }) }) .map (res => { let data = res.json(); console.log(data); return data; }); } 

The code runs fine, except that the map function does not start. I do not get any errors and try to run the code with or without import 'rxjs/add/operator/map' with the same result. I also tried a simpler mapping function .map (res => res.json()); .

In both cases, I expect the result returned by the .subscribe() function to be a JSON response, but instead I get the original answer.

Edit: Added screenshot with request data and response

Answer:

 [{"field":"email","message":"Email or password incorrect."},{"field":"password","message":"Email or password incorrect."}] 

I also tested it on a completely successful request (Status Code: 200), and the card function works fine. Therefore, I assume that it only starts when the response is successful. Is there a way to make it work independently or to specify additional status codes on which it should work?

Answer 1

As discussed with the comments, the map method is not called because the response contains a 422 status code, i.e. an error. Therefore, the catch method is directly called.

If you need to extract the JSON content corresponding to the error, you can try something like this in your service:

 getCompanies() { return this.http.get('https://angular2.apispark.net/v1/companies1/', { headers: headers }).map(res => res.json()).catch(err => Observable.throw(err.json()); } 

Now in the component that calls the service, you can subscribe. The second parameter will be called in your case with the content of the JSON response:

 service.getCompanies().subscribe( data => console.log('data = '+data), err => console.log('err = '+JSON.stringify(err, null, 2)), // <--- () => console.log('complete') ); 

Printed Content:

 err = { "code": 404, "description": "The server has not found anything matching the request URI", "reasonPhrase": "Not Found" } 

Hope this helps you, Thierry