Synchronising Setting/Getting Objects and values from Ionic Storage

Hi guys, I’m doing a simple weather app project for college in Ionic v3 and I’m having a real headache using ionic storage to return values back that have been passed in to storage. The application is fairly basic, GET lat/lon values from an API, save them in storage and then pass them to another API to GET more information and display it on a home page.

I can get the values from the API initially straightforward enough and I’ve pulled the relevant information I need from the API, stored them in objects, cityInfo, weatherInfo, countryNews inside providers(below, this may be horribly incorrect way to do it so all recommendations are welcome.)

private cityInfo = {
    cca2: "",
    commonName: "",
    flag: "",
    lat:  0,
    lng: 0
  };

then I’ve set the value in storage as follows

packCityInfo(cityData: any): void {
    this.cityInfo.cca2 = (cityData[0].cca2);
    this.cityInfo.commonName = (cityData[0].name.common);
    this.cityInfo.flag = (cityData[0].flags.png);
    this.cityInfo.lat = (cityData[0].latlng[0]);
    this.cityInfo.lng = (cityData[0].latlng[1]);
this.storage.set('cityInfo', this.cityInfo);

If I console.log(cityInfo) it prints the different values for the different properties correctly i.e.

cca2: "GB"
commonName: "United Kingdom"
flag: "https://flagcdn.com/w320/gb.png"
lat: 54
lng: -2

The problem I’m having is figuring out how to then access these values out of storage. I think the issue I’m having is around synchronicity. I found that the first time I try to save my settings the request will fail and say that the “.lat is undefined” but the second time I save my settings the request will succeed and I’ll get information from the API request from storage.

My saveSettings() function In my settings.ts page the following

this.storage.set('city', this.cityName);
    this.storage.set('units', this.units);

    this.cityDataService.getCityDataFromAPI(this.cityName);

    this.storage.get("cityInfo").then((val) => {
      let cityInfo = val;
      // return val;
      this.weatherService.getWeatherFromApiCoordinates(cityInfo.lat, cityInfo.lng, this.units);
    }).catch((err) => {
      console.log(err);
    });

Returns “TypeError: Cannot read properties of null (reading ‘lat’) at settings.ts:48”

The Services are pretty standard and just handle the http get requests so I don’t think the issue is with them? (Could be wrong ofc)

getWeatherFromApiCoordinates(lat: number, lon: number, units: string) : void  {
    let weatherData = this.http.get('https://api.weatherbit.io/v2.0/current?lat=' + lat + '&lon=' + lon + "&key=" + this.apiKey + '&units=' + units);
    weatherData.subscribe(data => {
      let currentWeather = data;

      this.packWeatherData(currentWeather);
    });
  }

The second time the saveSettings() function is run it will correctly display values but its pulling from the previously set values. So for example I run

1. Dublin,
2. Dublin,
3. France. It will return 1.Err, 2.Dublin, 3.Dublin.

Each time storage is cleared it will run Error initially obv

I’ve tried marking the GET functions as async and awaiting the return , similar with the set and get storage but its not worked just yet.

The full project is here On github
Having a bit of a nightmare closing this one out (also we’re limited to specifically using
ionic 5.4.4
Angular CLI: 8.3.8
Node: 10.16.3

Package Version

@angular-devkit/architect 0.803.8
@angular-devkit/core 8.3.8
@angular-devkit/schematics 8.3.8
@schematics/angular 8.3.8
@schematics/update 0.803.8
rxjs 6.4.0

Any and all advice will be appreciated < 3

1 post - 1 participant

Read full topic