res.json() HttpClient Response

Question

I realize that the new updates don't require conversion of a response to JSON.

The tutorial I am following puts this into the api.service.ts

export class ApiService {

  constructor(private http: HttpClient){}

  messages = []
  getMessage(){
    this.http.get('http://localhost:3000/newroute').subscribe(res =>{
      this.messages = res.json()
    })
  }

}

However, with the new update, "res.json()" does not work. I get the following error: Property 'json' does not exist on type 'Object'.

How can I solve this?

Here is the data I'm trying to loop through:

var posts = [
{message:'Hello World'},
{greeting:'Whats going on'}
]

It seems your res is an object and not an array. Just show the console.loh(res) — dileepkumar jami, Feb 21 '19 at 04:48
Possible duplicate of [Property 'json' does not exist on type 'Object'](https://stackoverflow.com/questions/46005430/property-json-does-not-exist-on-type-object) — Jota.Toledo, Feb 21 '19 at 07:18

score 0 · Answer 1 · answered Feb 21 '19 at 04:04

0

Simply do:

getMessage(){
  this.http.get('http://localhost:3000/newroute').subscribe(res =>{
  this.messages = res;
  })
}

answered Feb 21 '19 at 04:04

Shashank Vivek

16,888
8
62
104

I get this error for 'this.messages': The 'Object' type is assignable to very few other types. Did you mean to use the 'any' type instead? – amihac Feb 21 '19 at 04:15
I guess this would help you more. https://stackoverflow.com/questions/45426907/type-object-is-not-assignable-to-type-with-new-httpclient-httpgetmodule – Shashank Vivek Feb 21 '19 at 04:31
1

@amihac Putting `any` could be quick fix but I suggest you to go through above mentioned link in my comments – Shashank Vivek Feb 21 '19 at 04:32
@amihac did u get the answer ? – Shashank Vivek Feb 21 '19 at 05:23

score 0 · Answer 2 · 2019-02-21T04:31:18.880

0

Angular allows you to do type checking on the response. You don't have to manually parse JSON.

Here is a code snippet from your example (I recommend using types):

messages: Message[] = []
getMessage() {
  this.http.get<Message[]>('http://localhost:3000/newroute').subscribe((res: Message[]) => {
    this.messages = res;
  });
}

(Update)

Based on your provided data, an interface for Message could look like this:

export interface Message {
  [s: string]: string;
}

However, if "Messages" can only have specific keys like "message" and "greeting", then you can add any of those as optional properties as well.

export interface Message {
  message?: string;
  greeting?: string;
}

edited Feb 21 '19 at 04:31

answered Feb 21 '19 at 04:10

I get this error for 'this.messages': The 'Object' type is assignable to very few other types. Did you mean to use the 'any' type instead? – amihac Feb 21 '19 at 04:14
It depends on what type of data you are returning. If you update your question with a sample of return data, I can update the answer to help you more accurately – Feb 21 '19 at 04:16
Added to the question! var posts = [ {message:'Hello World'}, {greeting:'Whats going on'} ] – amihac Feb 21 '19 at 04:23
Actually, did you mean the error is on this line `messages: Message[] = []` or this line `this.messages = res;`? – Feb 21 '19 at 04:27
@amihac I updated the answer to also include the return type being passed in as a generic on the `http.get` method. Your issue may be a combination of this and/or res not having a type specified `.subscribe((res: Message[]) =>` instead of `.subscribe(res =>`. – Feb 21 '19 at 04:36
THANK YOU! Including the type Message[] worked! Thank you! @OneLunch Man – amihac Feb 21 '19 at 05:42
You're welcome! Please don't forget to mark as answer if this solved your problem- – Feb 21 '19 at 13:53

score -1 · Answer 3 · answered Feb 21 '19 at 06:51

HttpClient gives you json object only, so no need to do .json() again.So do the following code it works for you

getMessage(){
  this.http.get('http://localhost:3000/newroute').subscribe(res =>{
  let messages: any = res;
  this.messages = messages;
  })
}

res.json() HttpClient Response

3 Answers3