如何在 getJSON 上制作 if else 语句以加载不同的 leaflet 标记

Question

How to check condition (==) array from json and make statement if else to load different leaflet markers.

$.getJSON("<?=base_url() ?>home/sekolah_json", function(data){
    $.each(data, function(i, field){
    var longitude = parseFloat(data[i].longitude);  
    var latitude = parseFloat(data[i].latitude);  
    var nama = (data[i].nama_sekolah);
    L.icon = function (options) {
    return new L.Icon(options);
    };
    var marker  = (data[i].jenjang);

    //how to write if else on this line of code 
    if (marker == 'sd'){
      var redIcon = new L.icon({iconUrl: '<?=base_url() ?>assets/leaflet/images/sd1.png', iconSize:[30,30]});
    }else{
      var blueIcon = new L.icon({iconUrl: '<?=base_url() ?>assets/leaflet/images/smp1.png', iconSize:[30,30]});
    }
   // help me


    L.marker([longitude, latitude], {icon: marker}).addTo(map)
    .bindPopup(nama, {autoClose: false, autoPan: false})
    .openPopup();
    });
  });

Answer 1

//how to write if else on this line of code

//create blueIcon by default
var icon = new L.icon({iconUrl: '<?=base_url() ?>assets/leaflet/images/smp1.png', iconSize:[30,30]});
//if marker is 'sd' then update same variable for Red Icon
if (marker == 'sd'){
  icon = new L.icon({iconUrl: '<?=base_url() ?>assets/leaflet/images/sd1.png', iconSize:[30,30]});
}

//Now you can 'icon' variable below as per requirement.

Hope it helps.

Answer 2

You could save the icon in a previously defined var like markerIcon and then use it later as it will have the expected value:

$.getJSON("<?=base_url() ?>home/sekolah_json", function(data){
  $.each(data, function(i, field){
    var longitude = parseFloat(data[i].longitude);  
    var latitude = parseFloat(data[i].latitude);  
    var nama = (data[i].nama_sekolah);
    var marker  = (data[i].jenjang);

    var markerIcon; 
    if (marker == 'sd') {
      markerIcon = new L.Icon({iconUrl: '<?=base_url() ?>assets/leaflet/images/sd1.png', iconSize:[30,30]});
    } else {
      markerIcon = new L.Icon({iconUrl: '<?=base_url() ?>assets/leaflet/images/smp1.png', iconSize:[30,30]});
    }

    L.marker([longitude, latitude], {icon: markerIcon}).addTo(map)
    .bindPopup(nama, {autoClose: false, autoPan: false})
    .openPopup();
  });
});