how to access array elements outside a callback listener

Question

in the below posted code i am trying to access the e.coordinate from outside the callback listener this.map.on('pointermove'...) as shown below. the method routeToField() is invoked on a button click. inside this method i am trying to access the values of this.mousePointerLonLat. the log statement inside the callback listener this.map.on(...) are displayed and contain values in type of array with two elements. the problem is, despite this.mousePointerLonLat is initialized, when it is accessed inside the method routeToField() i receive

ERROR TypeError: Cannot read property '0' of undefined
at SiteMapComponent.push.zIrq.SiteMapComponent.routeToFiel

please let me know how to access the values in the array this.mousePointerLonLat from inside the methos routeToField

code:

this.map.on('pointermove', (e)=>{
            this.mousePointerLonLat = toLonLat(e.coordinate);
        });

this.mousePointerLonLat = this.map.on.bind(this.mousePointerLonLat)
    console.log("this.mousePointerLonLat: ", this.mousePointerLonLat);
    console.log("this.mousePointerLonLat[0]: ", this.mousePointerLonLat[0]);
    console.log("this.mousePointerLonLat[1]: ", this.mousePointerLonLat[1]);
    var startLongitude = SynopsWebAppComponent.USER_COORDINATES.longitude;
    var startLatitude = SynopsWebAppComponent.USER_COORDINATES.latitude;
    var endLongitude = this.mousePointerLonLat[0];
    var endLatitude = this.mousePointerLonLat[1];
    this.openRouteServiceAPIService.getRouteAsVectorLayerBetweenStartEndLocations(startLongitude,startLatitude,endLongitude,endLatitude);

Use arrow function: `this.map.on('pointermove', (e) => { ... });`. See post: https://stackoverflow.com/a/20279485/6513921 — ruth, Apr 20 '21 at 08:35
Your question isn't clear TBH. **1.** Are you sure the callback to `this.map.on('pointermove', ...)` would be triggered _before_ the button is clicked (or `routeToField()` is triggered)? **2.** Did you go through the attached post? Which variable do you think is accessed by `this.mousePointerLonLat` in a plain JS callback function? It accesses only within the scope of the callback. The class member variable is not initialized in a plain JS callback function. For that you need to use either `bind(this)` or arrow function. — ruth, Apr 20 '21 at 08:43
@Letsamrit Read the post linked by Michael D. You are trying to access "this", but the two "this"-es are not the same. — Automatico, Apr 20 '21 at 08:48
@LetsamrIt: You could refer this post for `bind` usage: https://stackoverflow.com/a/10115970/6513921 — ruth, Apr 20 '21 at 08:52
@MichaelD can you please provide some help to answer this question:https://stackoverflow.com/questions/67175905/how-to-bind-on-array-to-have-access-to-it-outside-the-callback-listener — Amrmsmb, Apr 20 '21 at 09:13
`bind` is for external callback handler. Why do you not use arrow function? — ruth, Apr 20 '21 at 09:20
@MichaelD please check the updated question above. i use lambda function and external binding but still getting undefined — Amrmsmb, Apr 20 '21 at 09:24

score 0 · Answer 1 · answered Apr 20 '21 at 09:56

Expanding from my comments

The callback inside the this.map.on('pointermove', {...}) is asynchronous. So if the button is pressed before the callback has been executed, the variable this.mousePointerLonLat would still be undefined. See here for more info on asynchronous operations.

One quick solution is to disable the button until the variable has been initialized. You could use the double-bang operator.

Controller (*.ts)

this.map.on('pointermove', (e) => {
  this.mousePointerLonLat = toLonLat(e.coordinate);
});

routeToField() {
  console.log("this.mousePointerLonLat: ", this.mousePointerLonLat);
  console.log("this.mousePointerLonLat[0]: ", this.mousePointerLonLat[0]);
  console.log("this.mousePointerLonLat[1]: ", this.mousePointerLonLat[1]);
  var startLongitude = SynopsWebAppComponent.USER_COORDINATES.longitude;
  var startLatitude = SynopsWebAppComponent.USER_COORDINATES.latitude;
  var endLongitude = this.mousePointerLonLat[0];
  var endLatitude = this.mousePointerLonLat[1];

  this.openRouteServiceAPIService.getRouteAsVectorLayerBetweenStartEndLocations(
    startLongitude,
    startLatitude,
    endLongitude,
    endLatitude
  );
}

Template (*.html)

<button [disabled]="!mousePointerLonLat" (click)="routeToField()">
  Route
</button>

how to access array elements outside a callback listener

1 Answers1