rxjs map is giving an error when i upgrade http to httpClient in angular7

Question

I have a service in which I have login function like this

public userLogin(body) {
 return new Promise((resolve, reject) => {
  this.apiService
    .generateApiRequest({
      route: Constants.API_ROUTES.USER_LOGIN.route,
      type: Constants.API_ROUTES.USER_LOGIN.type,
      body: body
    })
    .map(res => res.json())
    .subscribe(response => {
      resolve(response);
     });
   });
 }

and have generateApiRequest function in utilities like this

generateApiRequest(request, isTokened = false) {
    var res;
    let response;
    if (!request.headers) {
        request.headers = new HttpHeaders();
    }
    if (isTokened) {
        request.headers.append('Token', this.localCache.getToken());
    }
    switch (request.type) {
        case Constants.REQUEST_TYPE.GET:
            response = this.get(request);
            break;
        case Constants.REQUEST_TYPE.POST:
            response = this.post(request);
            break;
        case Constants.REQUEST_TYPE.PUT:
            response = this.put(request);
            break;
        case Constants.REQUEST_TYPE.DELETE:
            response = this.delete(request);
            break;
    }
    return response;
}

When I upgraded older http to new HttpClient so after this I have to change map inside pipe function so I did like this

public userLogin(body) {
return new Promise((resolve, reject) => {
  this.apiService
    .generateApiRequest({
      route: Constants.API_ROUTES.USER_LOGIN.route,
      type: Constants.API_ROUTES.USER_LOGIN.type,
      body: body
    })
    .pipe(map(res => res.json()))
    .subscribe(response => {
      resolve(response);
     });
  });
 }

But compiler is giving an error at this line .pipe(map(res => res.json()))

How can I fix it?

Please refer to the documentation: https://angular.io/guide/http — AT82, Sep 13 '19 at 09:31
Now you already got an answer, but for the future, please post the error you get as well. "compiler is giving an error" isn't always enough information — ShamPooSham, Sep 13 '19 at 09:36

score 2 · Accepted Answer · answered Sep 13 '19 at 09:32

2

Right, that's because new http client by default calls res.json() implicitly and you don't need to that manually yourself. Just remove .json() call, so you don't need to use 'map' at all in your case.

answered Sep 13 '19 at 09:32

srjkaa

336
1
5

1

If you are going to copy paste part of someone elses answer, please give the credits... https://stackoverflow.com/a/45780553/6294072 – AT82 Sep 13 '19 at 09:33
So should i replace this `.pipe(map(res => res.json()))` to `.pipe()` ? – Fahad Subzwari Sep 13 '19 at 09:35
It should work, but you can also remove the whole line – ShamPooSham Sep 13 '19 at 09:36
You don't need to use .pipe() at all, just leave only .subscribe with your code. – srjkaa Sep 13 '19 at 09:37
you mean this `.generateApiRequest({ route: Constants.API_ROUTES.USER_LOGIN.route, type: Constants.API_ROUTES.USER_LOGIN.type, body: body }) .subscribe(response => { resolve(response); });` Instead of `.generateApiRequest({ route: Constants.API_ROUTES.USER_LOGIN.route, type: Constants.API_ROUTES.USER_LOGIN.type, body: body }) .pipe(map(res => res.json())) .subscribe(response => { resolve(response); });` – Fahad Subzwari Sep 13 '19 at 09:37
Yeah, definitely – srjkaa Sep 13 '19 at 09:38

score 0 · Answer 2 · answered Sep 13 '19 at 09:46

Since Angular Http client already map response from API by default is JSON.

You can simply remove the map

public userLogin(body) {
 return new Promise((resolve, reject) => {
  this.apiService
    .generateApiRequest({
      route: Constants.API_ROUTES.USER_LOGIN.route,
      type: Constants.API_ROUTES.USER_LOGIN.type,
      body: body
    })
    .subscribe(response => {
      resolve(response);
     });
  });
 }

rxjs map is giving an error when i upgrade http to httpClient in angular7

2 Answers2