Something went wrong with geolocation: ERROR TypeError: Unable to assign value to property 'lat' of null

Question

Something went wrong with geolocation: ERROR TypeError: Unable to assign value to property 'lat' of null

Issue with Retrieving User's Location

In my Angular project, I am trying to access the user's current location and store the longitude and latitude values in two properties named lng and lat. However, I am facing a persistent issue where I keep receiving the error message

ERROR TypeError: Cannot set property 'lat' of null

despite trying various solutions.

Snippet of TypeScript Code Related to the Issue


  lat : any;
  lng : any;

  constructor() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(this.setValues);
    }
   }

  setValues(values) {
    this.lat = values?.coords?.latitude
    this.lng = values?.coords?.longitude;
  }

The error seems to be originating from the first line of the setValues method.

Sample JSON Object Returned by getCurrentPosition Function


{
  coords:
  {
    latitude: 27.380583,
    longitude: 33.631839
  }
}

Solutions Attempted So Far

I have successfully received and printed the JSON object along with its subobjects. I even tried binding it to a local variable within the setValues function, but still encountered the same error.
Tried changing lat: any to lat: number or adding public before it.
Removed the null operators from the setValues method.
Attempted executing the code within the ngOnInit lifecycle hook.

All these attempts resulted in the same error persisting.

angular typescript geolocation typeerror angular9

Answer 1

Answer №1

The issue at hand revolves around the reference of this in different contexts. Specifically, it only points to the outer scope (the component in this scenario) when an arrow function is utilized. Otherwise, this refers to the function itself.

You can witness this behavior firsthand by conducting the following test:

ngOnInit() {

  // 1. delegate function
  this.getValues(this.setValues);

  // 2. function() { }
  this.getValues(function(values) {
    console.log(this);
  });

  // 3. arrow function
  this.getValues(values => this.setValues(values));
}

getValues(callback: (values) => void) {
  callback({
    lat: 1,
    long: 2
  });
}

setValues(values) {
  console.log(this);
}

This demonstrates three distinct approaches to passing a function as a callback. Approaches 1 and 2 will output undefined to the console. Approach 3 will display the containing class (AppComponent in my example).

DEMO: https://stackblitz.com/edit/angular-c8eypx

Answer 2

The issue at hand revolves around the reference of this in different contexts. Specifically, it only points to the outer scope (the component in this scenario) when an arrow function is utilized. Otherwise, this refers to the function itself.

You can witness this behavior firsthand by conducting the following test:

ngOnInit() {

  // 1. delegate function
  this.getValues(this.setValues);

  // 2. function() { }
  this.getValues(function(values) {
    console.log(this);
  });

  // 3. arrow function
  this.getValues(values => this.setValues(values));
}

getValues(callback: (values) => void) {
  callback({
    lat: 1,
    long: 2
  });
}

setValues(values) {
  console.log(this);
}

This demonstrates three distinct approaches to passing a function as a callback. Approaches 1 and 2 will output undefined to the console. Approach 3 will display the containing class (AppComponent in my example).

DEMO: https://stackblitz.com/edit/angular-c8eypx

Answer 3

Answer №2

The issue at hand is not entirely clear to me, however, it appears to be related to the scope. By implementing an anonymous callback function, the problem seems to be resolved successfully.


  constructor() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition((data) => { 
        this.latitude = data?.coords?.lat
        this.longitude = data?.coords?.lng;
      });
    }
   }

Answer 4

The issue at hand is not entirely clear to me, however, it appears to be related to the scope. By implementing an anonymous callback function, the problem seems to be resolved successfully.


  constructor() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition((data) => { 
        this.latitude = data?.coords?.lat
        this.longitude = data?.coords?.lng;
      });
    }
   }

Answer 5

Answer №3

An alternative approach is to create an unnamed function:

  myFunction = (data) => {
    this.price = data?.costs?.price;
    this.quantity = data?.amount?.quantity;
  }

Answer 6

An alternative approach is to create an unnamed function:

  myFunction = (data) => {
    this.price = data?.costs?.price;
    this.quantity = data?.amount?.quantity;
  }

Something went wrong with geolocation: ERROR TypeError: Unable to assign value to property 'lat' of null

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to implement live reloading for a complete full stack application?

The TypeScript error message "The property 'target' is not found on type 'string' in React Native"

Having trouble with typecasting in Angular 9 after receiving an HTTP response?

Delete an entry in a singular mapping in a one-to-one connection [TypeORM]

Jest is having trouble recognizing a custom global function during testing, even though it functions properly outside of testing

Ways to fix a "define is not defined" issue when utilizing jasmine karma with compiled typescript for component testing

Dynamic labeling of breadcrumbs in Angular is the way to go!

Display an API generated popup list using Vue's rendering capabilities

Combine the AnimatedMarker from leafletjs with typescript

Encountering issues with `npm run build:prod` on Ubuntu 16.04, whereas it runs smoothly on

ERROR TypeError: Unable to access the 'nativeElement' property since it is undefined in Angular 5

Angular 2 repeatedly pushes elements into an array during ngDoCheck

Exploring Vue 3: Crafting a custom plugin using the composition API and enhancing it with Typescript type augmentation

Could a tslint rule be implemented in Typescript classes to ensure method return types are enforced?

Dealing with TypeScript and the Mongoose loadClass problem

Troubles encountered with fetching pre-filled values in Angular form automation

Can the push() method be utilized to insert an element into an observable array?

Encountering a MatFormFieldModule error during npm start due to it not being recognized as an NgModule

Angular2 Window Opener

Guide on enabling external API login with Next Auth v5 in Next.js 14 using the application router