Angular HttpClient subscription returning undefined in async/await function

I have a service that uses API:

import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';
import { environment } from '../../../environments/environment.development';
import { HttpClient } from '@angular/common/http';
@Injectable({
providedIn: 'root',
})
export class LandingPageService {
constructor(private http: HttpClient) {
this.updateTemperaturesForCities();
}
private regionSubject: BehaviorSubject<string> = new BehaviorSubject<string>(
'',
);
openWeatherMapAPIKey = environment.APPID;
responseData$: Observable<any> | undefined;
async getDataForASpecifiedCity(city: string) {
try {
const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${this.openWeatherMapAPIKey}`;
this.http.get(url).subscribe((data: any) => {
this.responseData$ = data;
const mainTemp = this.kelvinToCelsius(data.main.temp);
const cityName = data.name;
console.log(mainTemp);
return mainTemp;
});
} catch (error) {
console.error(error);
}
}

mainCities: any[] = [
{
city: 'Puerto rico',
temperature: 25,
desc: 'Take sunglasses and use SPF cream.',
url: '../../../../../assets/weather/sunny.jpg',
},
{
city: 'Warsaw',
temperature: 10,
desc: 'First days of spring are coming.',
url: '../../../../../assets/weather/autumnly.jpg',
},
{
city: 'Yakutsk',
temperature: -10,
desc: 'Wear a thick jacket and gloves.',
url: '../../../../../assets/weather/snowy.jpg',
},
];

async updateTemperaturesForCities() {
for (let i = 0; i < this.mainCities.length; i++) {
const cityName = this.mainCities.city;
console.log('city is ', cityName);
const temperature = await this.getDataForASpecifiedCity(cityName);
console.log('temperature is' + temperature);
this.mainCities.temperature = temperature;
}
}

getCards() {
return this.mainCities;
}

kelvinToCelsius(kelvin: number): number {
const celsius = kelvin - 273.15;
return Math.round(celsius);
}
}


i want to get and display the weather for Warsawa, Puerto rico and Yaktusk. The console are correct, i get the data, but it doestn get displayed on the screen.

try {
const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${this.openWeatherMapAPIKey}`;
this.http.get(url).subscribe((data: any) => {
this.responseData$ = data;
const mainTemp = this.kelvinToCelsius(data.main.temp);
const cityName = data.name;
console.log(mainTemp);
return mainTemp;
});
} catch (error) {
console.error(error);
}


this function returns the correct values but

async updateTemperaturesForCities() {
for (let i = 0; i < this.mainCities.length; i++) {
const cityName = this.mainCities.city;
console.log('city is ', cityName);
const temperature = await this.getDataForASpecifiedCity(cityName);
console.log('temperature is' + temperature);
this.mainCities.temperature = temperature;
}
}


and this

console.log('temperature is' + temperature);


returns "undefined". Why? How to fix it? I think it is something with RxJS, but i call the async function with await so I thought it would work.

Continue reading...