Angular res.json is not a function

Question

Why is not a function? I’ve read this but I cannot make it work for my project, the error is shown in the following code

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import 'rxjs/add/operator/map';

constructor(public http: HttpClient) {
}

getListVideos(listId) {
return this.http.get('https://www.googleapis.com/youtube/v3/playlistItems?key=' + this.apiKey + '&playlistId=' + listId +'&part=snippet,id&maxResults=20')
.map((res: Response) => {
  return res.json()['items'];
})
}

And following error is thrown:

ERROR TypeError: res.json is not a function at MapSubscriber.project (yt.ts:18) at MapSubscriber._next (map.js:79) at MapSubscriber.Subscriber.next (Subscriber.js:89) at MapSubscriber._next (map.js:85) at MapSubscriber.Subscriber.next (Subscriber.js:89) at FilterSubscriber._next (filter.js:89) at FilterSubscriber.Subscriber.next (Subscriber.js:89) at MergeMapSubscriber.notifyNext (mergeMap.js:145) at InnerSubscriber._next (InnerSubscriber.js:23) at InnerSubscriber.Subscriber.next (Subscriber.js:89)

Post all the relevant code (what is this.http?, what are the imports?), and the exact and complete error message. — JB Nizet
– JB Nizet, Commented Jan 25, 2018 at 23:04
output the actual to see if it has json() method, you might be using the latest HttpClient that doesn't need the .json() call anymore. — Bk Santiago
– Bk Santiago, Commented Jan 26, 2018 at 1:18
@BkSantiago if it doesn't need it, how it would be my code? Do you have a page where I can read more about it? — Bryan Arreola
– Bryan Arreola, Commented Jan 26, 2018 at 20:06
HttpClient observables don't emit Response objects. They emit the body of the response, already parsed. Read the documentation: angular.io/guide/http#making-a-request-for-json-data. Everything is much simpler when you read the documentation. — JB Nizet
– JB Nizet, Commented Jan 26, 2018 at 21:07

Uğur Dinç · Accepted Answer · 2018-01-26 01:08:17Z

1

Make sure to import Response from

import { Response } from '@angular/http';

or try to remove it from res to get rid of the error:

.map(res => res.json()['items']);

answered Jan 26, 2018 at 1:08

Uğur Dinç

2,4652 gold badges20 silver badges27 bronze badges

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

Comments

Bryan Arreola · Accepted Answer · 2018-01-26 20:15:05Z

1

I solve it by following the next page:

https://angular.io/guide/http#making-a-request-for-json-data

The get() method on HttpClient makes accessing this data straightforward. For example:

 this.http.get('/api/items').subscribe(data => {
  // Read the result field from the JSON response.
  this.results = data['results'];
});

answered Jan 26, 2018 at 20:15

Bryan Arreola

3072 gold badges8 silver badges24 bronze badges

Comments

Narendra Solanki · Accepted Answer · 2018-08-17 19:52:14Z

0

HttpClient automatically imports json. Let’s say you are expecting to read an object of type User.

return this.http.get<User>(url).subscribe(user => console.log(user));
The variable user is of type User.

Without specifying a type, your response is automatically json. No need to parse it to json.

https://angular.io/guide/http#making-a-request-for-json-data

answered Aug 17, 2018 at 19:52

Narendra Solanki

1,21216 silver badges22 bronze badges

Comments

MJ Montes · Accepted Answer · 2019-03-14 03:50:41Z

0

I was having the same issue but solved when I removed the CORS extension in my chrome browser

answered Mar 14, 2019 at 3:50

MJ Montes

3,3861 gold badge22 silver badges22 bronze badges

Collectives™ on Stack Overflow

Angular res.json is not a function

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related