2

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
        }
      }
    });
  }
}
  • 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 . – Mohith Shrivastava Apr 8 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 Apr 8 at 18:03
1

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.

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.