3

This may be a super simple solution, I had this below code copied from another location from the same project, which works really well. Brought it in to another section, changed the variable names, for some reason it doesn't work. I get the error "Cannot read property 'push' of undefined". Also the console.log below get the correct length.

@track cities = [];

markerClick(e) {
   let province = '';
   getCitiesByProvince({
     province: province,
   }).then(result => {
       console.log(result.length)
       for (let i = 0; i < result.length; i++) {
         this.cities.push(result[i]);
       }
    });
 }

function run when clicked on a map marker.

 export default class MduPenetration extends LightningElement {

  @track provinces = [];
  @track cities = [];

  @wire(onLoadProvinces) provStats({
    data
  }) {
    if (data) {
      for (let i = 0; i < data.length; i++) {
        this.provinces.push({
          "key": data[i].Id,
          "province": data[i].Name,
          "latitude": latitude,
          "longitude": longitude
        });
      }
      this.initializeMap();
    }
  }

  initializeMap() {
    Promise.allSettled([
      loadStyle(this, leaflet + '/leaflet.css'),
      loadScript(this, leaflet + '/leaflet.js')
    ]).then(() => {
      const el = this.template.querySelector(".map-root");
      let mymap = L.map(el).setView([54.139503, -96.653471], 5);

      L.tileLayer('https://api.mapbox.com/styles/v1/sumchans', { tileSize: 512, zoomOffset: -1 }).addTo(mymap);

      let bcPopup = L.circle([this.provinces[0].latitude, this.provinces[0].longitude], {
        id: 'BC',
        color: 'white',
        fillColor: '#38c',
        fillOpacity: 0.5,
        radius: (this.provinces[0].penetration) * 2500
      }).addTo(mymap).on('click', this.markerClick);
    });
  }
  markerClick(e) {
    getCitiesByProvince({
      province: 'BC'
    }).then(result => {
      if (result) {
        // console.log(this.cities); This says undefined
        for (let i = 0; i < result.length; i++) {
          this.cities.push(result[i]);//This says cannot read push of undefined
        }
      }
    });
  }
}
2
  • Can you publish the code that's causing issues via the Salesforce playground for lwc.It makes it easier to reproduce it. I want to make sure we understand the real issue here . Commented Apr 8, 2020 at 2:58
  • Hello @Mohit, I have edited my original post to include how the call to markerClick method happens. I am invoking the markerClick event when the user clicks on a map marker. Could that be a reason why I get the "Cannot read push of undefined" error message.
    – sumchans
    Commented Apr 8, 2020 at 18:03

1 Answer 1

2

Since it's a callback function, the scope of "this" is changing to the Leaflet library (or possibly a marker class, etc). If you want to maintain the scope of the component, you should use bind to keep the correct scope:

  }).addTo(mymap).on('click', this.markerClick.bind(this));

This will make sure you're in the component's scope, and not in the marker's scope.

2
  • Thanks @sfdcfox, silly that I didn't put the whole code right at beginning.
    – sumchans
    Commented Apr 8, 2020 at 18:45
  • 1
    @sumchans Yeah, context is important (pun intended). Glad I was able to help.
    – sfdcfox
    Commented Apr 8, 2020 at 18:52

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .