Returning data based on clicked marker using Leaflet?

Question

How do I get the data according to the marker I clicked on?

for(i in data) {
    var title = data[i].title,
    id = data[i].id,      
    position = data[i].position,      
    kriteria = data[i].data.kriteria,     
    iconUrl =  data[i].icon.url,
    pa_judul = data[i].data.pa_judul,
    marker = new L.Marker(new L.latLng(position), 
    {

        icon:  L.icon({
            iconUrl:   iconUrl,
        })

    }, 
    {title: title},

    ).addTo(map);

    marker.bindPopup('ID: '+ id ).on('click', function(e) {
        console.log(data);
        $('#ModalDetail').modal('show').on('shown.bs.modal', function(e) {
        });
    });
    markersLayer.addLayer(marker);
}

console.log(data) returns the whole array:

When I change to console.log(data[i]); I get undefined message:

If I change to console.log(data[0]) or data[1] and data[2] the results is not error and I can get the data:

Only for marker.bindpopup this working fine, but for on click it's not working.

Answer 1

You could achieve what you want by adding custom property myID (could be any name) to marker and setting it to index value i. In this way the correct index to data array will be available at click event.

Something like this:

for(i in data) {
    var title = data[i].title,
    id = data[i].id,      
    position = data[i].position,      
    kriteria = data[i].data.kriteria,     
    iconUrl =  data[i].icon.url,
    pa_judul = data[i].data.pa_judul;

    var marker = new L.Marker(new L.latLng(position), 
    {
      icon: L.icon({
        iconUrl: iconUrl,
      }),
      title: title
    }
    ).addTo(map);
    marker.myID = i;

    marker.bindPopup('ID: '+ id ).on('click', function(e) {
      var i = e.target.myID;
      console.log(data[i]);
      $('#ModalDetail').modal('show').on('shown.bs.modal', function(e) {
      });
    });
    markersLayer.addLayer(marker);
}