Angular is showing undefined for the data but it is working in the view - angular8

Question

weatherData;
getDataFromApi(formData) {
this.apiService.getWeather(formData.location).subscribe(data => this.weatherData = data)
console.log(this.weatherData)
}
This is the function to get data and then store it in a local variable weatherData, a JSON file is returned from the API.
To get data in the veiw(HTML) I'm using
<p class="item1">{{ this.weatherData?.request.query }}</p>.
It works fine here but when I need to use the WeatherData for another function then it is showing that the parameters passed is undefined.

Answer 1

The reason is that your code will work asynchronously and the console.log() will be executed before the API call is completed.
The reason that the data is displayed in view is that you subscribed to the data and it will be streamed to the view asynchronously. The view will be updated only after the API call is complete because of subscription. So you can see the data in the view and not in the console.

Answer 2

Try this code and it will work fine.
ngOnInit() {
// getting data for Delhi location
this.apiService.getWeather("Delhi").subscribe(data => {
this.weatherData = data;
console.log(this.weatherData);
});
}
The reason behind undefined was code works asynchronously. While you send the request compiler move to the next line which was console.log(this.weatherData). It print the value of weather data which was undefined when declaring the variable. When response arrive compiler than assign data with this.weatherData.