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

Possible duplicate of [How can get HttpClient Status Code in Angular 4](https://stackoverflow.com/questions/46639154/how-can-get-httpclient-status-code-in-angular-4) — JB Nizet, Jun 26 '18 at 19:06

Amit Chigadani · Accepted Answer · 2018-06-26T19:58:46.400

7

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
});

edited Jun 26 '18 at 19:58

answered Jun 26 '18 at 19:12

Amit Chigadani

28,482
13
80
98

What is Config? – Anil Jun 26 '18 at 19:15
Well that's a expected response type. I simply used the code from angular.io. You can use it as string in your case. – Amit Chigadani Jun 26 '18 at 19:21
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 – Anil Jun 26 '18 at 19:27
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. – Amit Chigadani Jun 26 '18 at 19:31
yeah, i want to send even httpOptions which i have set. – Anil Jun 26 '18 at 19:35
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. – Amit Chigadani Jun 26 '18 at 19:37
const httpOptions = { headers: new HttpHeaders({ 'observe': 'response', 'Content-Type': 'application/json'}), is this correct? Please correct me If I am wrong – Anil Jun 26 '18 at 19:39
No, do not mix it with header It should be this way `const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json'}), 'observe': 'response'}` – Amit Chigadani Jun 26 '18 at 19:47

score 2 · Answer 2 · answered Apr 19 '19 at 11:52

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' })

answered Apr 19 '19 at 11:52

ABHISHEK GUPTA

41
1
6

BruceK · Answer 3 · 2019-01-23T18:59:02.360

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 => {}
        );

score 0 · Answer 4 · answered Jun 26 '18 at 19:10

0

Will data.status give you what you want?

answered Jun 26 '18 at 19:10

Antoniossss

31,590
6
57
99

How to read the status from response in angular http?

4 Answers4

Linked