How to read the status from response in angular http?

Question

I am facing some problem in reading the status code from response.

I am calling api in service,

return this.http.get<string>( this.remoteServer + '/google.com/open', httpOptions);

In my controller I have,

open() {
    this.openService.open(this.selected.qrCode)
    .subscribe(
      data => {
       console.log(data);
       this.toastService.showSuccess('Unlock Successfull', 'success');
      }
    );
  }

Now I want to read the http statustext,

the sample http response I am getting from the above call is.

HttpErrorResponse {headers: HttpHeaders, status: 200, statusText: "OK", url: "https://google.com/open", ok: false, …}

How to read the status text in the controller.

Please help me

Celestyna

angular.io/guide/http#reading-the-full-response – Haiphong

Possible duplicate of How can get HttpClient Status Code in Angular 4 – Haiphong

Answer 1

You can specify { observe: 'response' } as the second parameter to get request which gives you the full response data.

If you want to send other options like headers or params along with it, just rollup all of them in a single object this way.

const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json'}), params : myParams, observe: 'response'}

Reference

return this.http.get<string>(
    this.remoteServer + '/google.com/open', httpOptions).subscribe((data) => {
        console.log(data.status);     // staus 200
        console.log(data.statusText);  // OK
});

Fabre

What is Config? – Celestyna

Well that's a expected response type. I simply used the code from angular.io. You can use it as string in your case. – Fabre

one more small doubt, If I want to pass even http options as third argument in get(), it shows it expected only 1 - 2 parameters but got 3. Can you please explain? Thanks for the repsonse – Celestyna

You should be sending it as the second parameter only instead with another property { observe: 'response', header : httpHeader}. I assume you want to send header. If you want to send other options just add parameters to that second argument object. – Fabre

yeah, i want to send even httpOptions which i have set. – Celestyna

Just roll up all your options as single object and add key-> value observe: 'response' to the same object and pass this object as a second parameter. – Fabre

const httpOptions = { headers: new HttpHeaders({ 'observe': 'response', 'Content-Type': 'application/json'}), is this correct? Please correct me If I am wrong – Celestyna

No, do not mix it with header It should be this way const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json'}), 'observe': 'response'} – Fabre

Answer 2

We can also get the complete response by adding the { observe: 'response' } in our request.

return this._http.get<any>(this.serverUrl+'categories/'+id, { observe: 'response' })

Radley

Answer 3

The {observe:'response'} options qualifier can be added to either a get or a put on the HttpClient object. It should be added as an additional comma separated field to any existing options which you might have defined. See below for an example of a simple Put statement modified to return the full http content. This can be used for standardized status reporting in your application.

    body = this.currentDocument;

    let url = environment.base_url + 'api/Document/updateDocument';

    // For a put the options block is the third parameter. For a get this would be the second
    this.httpClient.put(url, body,
        {
            headers: new HttpHeaders({ 'Content-Type': 'application/json' }),
            withCredentials: true,
            // Add the observe block to the existing option parameters
            observe:'response'
        })
        .subscribe(
            response => {

                statusMessage = new StatusMessage();
                statusMessage.HttpStatus = response.status;
                statusMessage.StatusText = response.statusText;

                // This example uses an EventEmitter but you could do any kind of logging here
                this.updateStatusPanel.emit(statusMessage);
                // The JSON body of this response can be accessed via the response.body parameter
            },
            err => {}
        );

Musette

Answer 4

Will data.status give you what you want?

Gerick