Properties value is undefined in method which returns promise

Ionic Framework ionic-v3
1

Hi everybody. I need help please

Current behavior:
I’m trying to use a parameter in one method.
When I show the object with a console.log, The object is correctly displayed with its various properties.
When I tried to get value of one property of this object, I realize that it shows me : undefined. It seems like the values disappear.
The following pictures explain that :
The code :

image
undefined.png1380×782 116 KB

My google chrome console shows :
image
undefinedi2.jpg873×765 148 KB

Expected behavior:
The properties of my object should not be “undefined”, they should contain there real values inside this object.

Please, how could I solve this problem ??? Thanks for any answer

2

Post, in text, using backticks, the code you use to define origins, and the definition of the type IonicNativeGeoposition.

console.log isn’t wrong. If origins.latitude existed it would appear inside the curly braces.

3

OK.

IonicNativeGeoposition.model.ts

export class IonicNativeGeoposition{
    latitude: number;
    longitude: number;
    altitude: number;
    speed: number;
    heading: number;
    altitudeAccuracy: number;
    accuracy: number;
}

home.ts

import { DarkSkyApiDataPoint }              from '../../models/darkskyapi-datapoint.model';
import { IonicNativeGeoposition }           from '../../models/ionicnative-geoposition.model';
import { DarkSkyApiService }                from '../../services/darkskyapi.service';
import { IonicNativeService }               from '../../services/ionicnative.service';
//other imports ...

export class HomePage { 
     currentPosition: IonicNativeGeoposition = new IonicNativeGeoposition();
     currentForecast: DarkSkyApiDataPoint = new DarkSkyApiDataPoint();

constructor(private navController: NavController, private geolocation: Geolocation, private ionicNativeService: IonicNativeService, private darkSkyApiService: DarkSkyApiService) {

    this.getCurrentPosition();
    this.getCurrentForecast();

  }

  private getCurrentPosition() {
     this.ionicNativeService.loadCurrentLocationOn(this.currentPosition);
  }

/**GET THE CURRENT FORECAST AT DEVICE POSITION */
  public getCurrentForecast() {
    
    let response: DarkSkyApiResponse = new DarkSkyApiResponse();

// !!!!!!!!!!! HERE I SEND THE IOnicNativeGeoposition as origins !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
    this.darkSkyApiService.getCurrentForecast(this.currentPosition)
    .then( fetched => 
    {
      console.log(fetched) //works
      response = fetched;
      this.currentForecast = response.currently;
      this.currentForecast.placeName = response.timezone;      
    })
    .catch( error => console.log("Error on getCurrentForecast : " + error));
    
  }
}
4

Is loadCurrentLocationOn a standard API? I’m not familiar with it.

5

No. I’ve created this function inside one of my services (ionicnative.service.ts).
It’s simple. Take a look on the code :

ionicnative.service.ts


import {    Injectable  }                   from    '@angular/core';
import {    Http  }                         from    '@angular/http';
import { Geolocation }                      from    '@ionic-native/geolocation';
import { IonicNativeGeoposition   }         from    '../models/ionicnative-geoposition.model';

import 'rxjs/add/operator/toPromise';
import 'rxjs/add/operator/map';

@Injectable()
export class IonicNativeService {

    constructor(private geolocation: Geolocation) {
    }
    
**//THE FOLLOWING FUNCTION USE NATIVE Geolocation TO GET DEVICE LOCATION AND **
**//PUTS ON THE PARAMETER (here it's "position")**
    public loadCurrentLocationOn(position: IonicNativeGeoposition){
        
        this.geolocation.getCurrentPosition()
            .then((response) => {
                position.accuracy = response.coords.accuracy;
                position.altitude = response.coords.altitude;
                position.longitude = response.coords.longitude;
                position.latitude = response.coords.latitude;
                position.speed = response.coords.speed;
                position.heading = response.coords.heading;
                position.altitudeAccuracy = response.coords.altitudeAccuracy;
            })
            .catch((error) => {
                console.log('Error getting location ==> ', error);
            });
    }
}
6

If you have a class variable this.currentPosition, assign it directly.

this.currentPosition.accuracy = …

7

Have the variable “currentPosition” on home.ts.
I should not fill that variable by myself. It should be done by loadCurrentLocationOn(). But the function loadCurrentLocationOn() is working very fine and fill its parameter(position) with device position.

8

You’re posting a question to a programming forum because your code is working fine?

9

I said that because I think the problem doesn’t come from that function.

10

loadCurrentLocationOn() is virtually useless, because calling code has no way of knowing when its work has completed.

Eliminate its parameter and instead have it return a Promise<IonicNativeGeoposition>.

11

Thanks for your reply. Let me try it

12

Solved.

The real changes that I had to do was to put the rest of my code on the .then() of my method loadCurrentLocationOn() inside the home.ts. By this way, when the location will be available, the rest of my code will run.

@rapropos Thanks you for your explanations, it makes me realize the mistake :slight_smile:

The changes I’ve done Here

Have a nice day :slight_smile:

1 Like