How can I save http get response object in angular 6

Question

I'm new to angular and i'm trying to figure out how can I save in a local variable the response of http.get(url)

Here is my code :

export class AppComponent {

  private url = 'http://ws.audioscrobbler.com/2.0/?method=artist.getinfo&api_key=MY_KEY&format=json&artist=The+Weeknd' ;
  public data;

  constructor(private http: HttpClient) { 
    this.http.get(this.url).subscribe(response => this.data = response);
    console.log(this.data); // -> The result is undefined...
  }

}

At first, I tried this.http.get(this.url).subscribe(response => console.log(response)); and that was working has expected, however an assignation doesn't work.

Thanks a lot !

log this.data in subscribe, it's undefined because you log the data before the api response has arrived. — Lia
– Lia, Commented Aug 31, 2018 at 18:06
The http request is an asynchronous operations. The data will be saved, after the request has gotten a response. — korteee
– korteee, Commented Aug 31, 2018 at 18:06
This command is asynchronous ‘this.http.get(this.url).subscribe(response => this.data = response);‘ Like setTimeout. You trying to console data before subscribe event fire — Andreq Frenkel
– Andreq Frenkel, Commented Aug 31, 2018 at 18:06
Is there another method I can use to achieve the same thing synchronously ? — obrassard
– obrassard, Commented Aug 31, 2018 at 18:10
what do you mean synchronously? fetching the data from API takes time so if you want to achieve this data you should wait and do it asynchronous. — Lia
– Lia, Commented Aug 31, 2018 at 18:17

Dan Atkinson · Accepted Answer · 2023-03-01 13:07:07Z

2

Your code is exactly correct. The reason the console.log is not showing the response value is because it is running BEFORE the response is processed. Once the HTTP request has been started, JavaScript continues executing the current function.

If you want to log the response, you need to do so inside the response handler

export class AppComponent {

  private url = 'http://ws.audioscrobbler.com/2.0/?method=artist.getinfo&api_key=MY_KEY&format=json&artist=The+Weeknd' ;
  public data;

  constructor(private http: HttpClient) { 
    this.http.get(this.url).subscribe(response => {
        this.data = response;
        console.log(this.data);
    });
  }    
}

edited Mar 1, 2023 at 13:07

Dan Atkinson

11.8k14 gold badges89 silver badges116 bronze badges

answered Aug 31, 2018 at 18:06

Vlad274

6,9642 gold badges37 silver badges46 bronze badges

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

6 Comments

obrassard Over a year ago

Ok I understand that subscribe() is asynchronous, is there another method I can use to achieve this synchronously ?

Vlad274 Over a year ago

@obrassard I don't know. It's possible there is something with async/await that will be close, but I recommend you don't bother. Web requests by their nature are asynchronous and you should work on being comfortable with them. You mention you're new, and I understand how annoying and frustrating that learning is - but it will greatly help you in the long run.

obrassard Over a year ago

In the response handler, how an i access each property of the json object received ? This is the result in the console : {name: "The Weeknd", mbid: "c8b03190-306c-4120-bb0b-6f2ebfc06ea9", url: ...} but when i try to get response.name for instance it's undefined

Vlad274 Over a year ago

@obrassard Without running the code myself, it's hard to guess at the reason. However, I think it may be an issue with the typing, so I would look into angular.io/guide/http#type-checking-the-response. Since you have not told Angular the structure of the response (by creating a class for it), it may not know how to parse the response into an object and is leaving as a string - thus the output to the console as a string and .name is undefined

obrassard Over a year ago

If i create a class, did I have to include every property and array of the response json object ? Can I add only the one that matters for my project ?

|

Suresh Kumar Ariya · Accepted Answer · 2018-08-31 18:05:39Z

0

You are doing async HTTP call. so you need to add console.log inside subscribe.

export class AppComponent {

  private url = 'http://ws.audioscrobbler.com/2.0/?method=artist.getinfo&api_key=MY_KEY&format=json&artist=The+Weeknd' ;
  public data;

  constructor(private http: HttpClient) { 
    this.http.get(this.url).subscribe(response => {
       this.data = response;
       console.log(this.data);
    });
  }

answered Aug 31, 2018 at 18:05

Suresh Kumar Ariya

9,8041 gold badge22 silver badges28 bronze badges

1 Comment

obrassard Over a year ago

I see, and in the response handler, do you know how an I can access each property of the json object received ? This is the result in the console : {name: "The Weeknd", mbid: "c8b03190-306c-4120-bb0b-6f2ebfc06ea9", url: ...} but when i try to get response.name for instance it's undefined

Collectives™ on Stack Overflow

How can I save http get response object in angular 6

2 Answers 2

6 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related