How to group "else if" in a javascript function

Question

I want to make a more elegant solution for my loop. How to use a function instead of all the "else if" statements, they are so many. There are several variables to take into account. The statement presents different icons on a map in laravel project.

The loop:

for (i = 0; i < locations.length; i++) {
  end = new Date(locations[i][6]);
  date1 = new Date(locations[i][4]);
  todaysdate = new Date(ldstr);
  upcomingdate = new Date(locations[i][5]);
  finisheddate = new Date(locations[i][9]); // Randomiserad ikon om två eller fler på samma ort.
  var newLat = locations[i][1] + (Math.random() - .15) / 20;
  var newLng = locations[i][2] + (Math.random() - .15) / 20;
  if ((locations[i][6]) || (locations[i][7]) == 0) { // closed or not public
    var marker = new L.marker([newLat, newLng], marker3);
    marker.url = locations[i][8];
    marker.bindPopup(locations[i][0]);
    //  marker.addTo(map);  //Visas ej för stängd 
    marker.on('click', function() {
      window.location = (this.url);
    });
    marker.on('mouseover', function(e) {
      this.openPopup();
    });
    marker.on('mouseout', function(e) {
      this.closePopup();
    });
  } else if (todaysdate > finisheddate) { // finished
    var marker = new L.marker([newLat, newLng], marker2);
    marker.url = locations[i][8];
    marker.bindPopup(locations[i][10]);
    marker.addTo(map);
    marker.on('click', function() {
      window.location = (this.url);
    });
    marker.on('mouseover', function(e) {
      this.openPopup();
    });
    marker.on('mouseout', function(e) {
      this.closePopup();
    });
  } else if (todaysdate > date1) { // signups closed
    var marker = new L.marker([newLat, newLng], marker2);
    marker.url = locations[i][8];
    marker.bindPopup(locations[i][12]);
    marker.addTo(map);
    marker.on('click', function() {
      window.location = (this.url);
    });
    marker.on('mouseover', function(e) {
      this.openPopup();
    });
    marker.on('mouseout', function(e) {
      this.closePopup();
    });
  } else if (todaysdate < upcomingdate) { // upcoming
    var marker = new L.marker([newLat, newLng], marker3);
    marker.url = locations[i][8];
    marker.bindPopup(locations[i][11]);
    marker.addTo(map);
    marker.on('click', function() {
      window.location = (this.url);
    });
    marker.on('mouseover', function(e) {
      this.openPopup();
    });
    marker.on('mouseout', function(e) {
      this.closePopup();
    });
  } else {
    var marker = new L.marker([newLat, newLng], marker1); // signups open
    marker.url = locations[i][8];
    marker.bindPopup(locations[i][0]);
    marker.addTo(map);
    marker.on('click', function() {
      window.location = (this.url);
    });
    marker.on('mouseover', function(e) {
      this.openPopup();
    });
    marker.on('mouseout', function(e) {
      this.closePopup();
    });
  }; // end for loop

The database loop:

@foreach ($data as $i)
              [ "{{ $i->name }}  " + "i " + "{{ $i->contact_city }}" +  " <br>" + "{{ $i->date }}" + "   Anmälda: " + 
              "{{ $i->signups_count }}"+ " <br>"  + "Anmälan stänger " + "{{ $i->signups_closing_date }}" , 
              {{ $i->lat }},{{ $i->lng }},0, "{{ $i->signups_closing_date }}" , "{{ $i->signups_opening_date }}" ,  
              "{{ $i->closed_at }}" , "{{ $i->is_public }}",'/app/competitions/'+ "{{ $i->id }}" + '/information', "{{ $i->date }}", 
              "{{ $i->name }}  " + "i " + "{{ $i->contact_city }}"+ " <br>" + "{{ $i->date }}" + " Avslutad/Genomförd", 
              "{{ $i->name }}  " + "i " + "{{ $i->contact_city }}" + " " + "{{ $i->date }}" +  " <br>" + "Anmälan öppnar " + 
              "{{ $i->signups_opening_date }}","{{ $i->name }}  " + "i " + "{{ $i->contact_city }}"+ " <br>" + "{{ $i->date }}" + 
              " Anmälan stängd"],
          @endforeach 
    ];
                var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
                var osmAttrib='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                var osm = new L.TileLayer(osmUrl, {attribution: osmAttrib});
                var map = new L.Map('map').addLayer(osm).setView([59.55,12.26], 5);
                map.options.minZoom = 3;
                map.options.maxZoom = 14;
                var t=new Date();
                var visa;
                var ldstr=t.toLocaleDateString(); // Today's date.

This is the loop that executes every time the map is accessed.

Answer 1

Move the common code out of the if...else structure, such as setting up the event listeners.

For where there is variation, create an array with all the variations for a given argument/index, and pick one dynamically from that array based on a state.

That state can be set up by executing the if conditions in a conditional expression, each time associating a state (ranging from 0 to 4).

Also use the for..of syntax and declare all your variables with var, let or const.

for (let location of locations) {
  var end = new Date(location[6]);
  var date1 = new Date(location[4]);
  var todaysdate = new Date(ldstr);
  var upcomingdate = new Date(location[5]);
  var finisheddate = new Date(location[9]); 
  var newLat = location[1] + (Math.random() - .15) / 20;
  var newLng = location[2] + (Math.random() - .15) / 20;
  
  var state = location[6] || (location[7] == 0) ? 0
            : todaysdate > finisheddate ? 1
            : todaysdate > date1 ? 2
            : todaysdate < upcomingdate ? 3
            : 4;
            
  var marker = new L.marker([newLat, newLng], [marker3, marker2, marker2, marker3, marker1][state]);
  marker.url = location[8];
  marker.bindPopup(location[[0, 10, 12, 11, 0][state]]);
  if (state) marker.addTo(map);
  marker.on('click', function() {
    window.location = this.url;
  });
  marker.on('mouseover', function(e) {
    this.openPopup();
  });
  marker.on('mouseout', function(e) {
    this.closePopup();
  });
}; // end for loop