Parse HTTP response in Angular 7?

Question

Server returns data in this format: {"query": 'queryName', 'result': []}.

I need to get only result part, for that I did this:

export class RequestInterception implements HttpInterceptor {

  public constructor(private route: Router) {

  }

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    return next.handle(request).do((event: HttpEvent<any>) => {
     if (event instanceof HttpResponse) {
            return event.body['result'];
     }
    }, (err: any) => {
        if (err instanceof HttpErrorResponse) {
             if (err.status === 401) {
               this.route.navigate(['/login']);
             }

          return throwError('backend comm error');

        }
    })

};

Inside do operator I tried this:

return event.body['result'];

But it still returns me whole object instead.

AppModule is:

 providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: RequestInterception,
      multi: true
    },
  ],

Sure, I use it: intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {} — POV
– POV, Commented Oct 30, 2018 at 15:15

SiddAjmera · Accepted Answer · 2018-10-30 16:20:20Z

1

If you want to transform the response in the interceptor, then you can do it with a map operator. You can also use the catchError operator and then inside that, use throwError in case the status code is 401.

Something like this:

import { Injectable } from '@angular/core';
import { 
  HttpInterceptor, HttpRequest, HttpResponse, 
  HttpHandler, HttpEvent, HttpErrorResponse 
} from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { map, catchError } from 'rxjs/operators';
import { Router } from '@angular/router';

@Injectable()
export class InterceptorService implements HttpInterceptor {

  constructor(private route: Router) { }

  intercept(
    req: HttpRequest<any>, 
    next: HttpHandler
  ) {
    return next.handle(modified)
      .pipe(
        map((event: HttpResponse<any>) => {
          event['body'] = event.body['result'];
          return event;
        }),
        catchError((error: HttpErrorResponse) => {
          if (error.status === 401) {
            this.route.navigate(['/login']);
          }
          return throwError('backend comm error');
        })
      );
  }

}

Here's a Sample StackBlitz for your ref.

edited Oct 30, 2018 at 16:20

answered Oct 30, 2018 at 15:41

SiddAjmera

39.6k7 gold badges77 silver badges113 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

POV Over a year ago

I get an error on: event['body'] = { foo: 'bar' };

POV Over a year ago

Cause it is constant

SiddAjmera Over a year ago

My bad. I just pasted the same code from the stackblitz. It should be event['body'] = event.body['result']; I've updated the answer.

double-beep · Accepted Answer · 2019-03-21 16:41:05Z

1

An HttpReponse behaves like a JSON. For example, in order to get the body of your response you can do the following:

response_body = response["body"]

Of course, you have to subscribe.

edited Mar 21, 2019 at 16:41

double-beep

5,67019 gold badges43 silver badges50 bronze badges

answered Mar 21, 2019 at 16:22

Orestis Zekai

9221 gold badge15 silver badges31 bronze badges

Collectives™ on Stack Overflow

Parse HTTP response in Angular 7?

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related