I want to change if else statement with switch case with multiple parameters

Question

I want to change if else state of code to switch case with multiple parameters i have tried if else it worked pretty much fine but I don't know how to convert it into switch case i not pro in javascript.

$(document).ready(function() {
  $("#calcBtn").click(function() {
    var bulkType = $("#bulkType option:selected").val();
    var bulkQty = $("#bulkQty option:selected").val();
    if (bulkType == 0 || bulkQty == 0) {
      $("#sms_final_price").html('<br/><h3 class="text-danger"><i class="fas fa-info-circle"></i> Select required fields.</h3>');
    } else {
      if (serviceType == 1 && serviceQty == 1) {
        var price = 10000 * 0.18;
      } else if (serviceType == 1 && serviceQty == 2) {
        var price = 25000 * 0.16;
      } else if (serviceType == 1 && serviceQty == 3) {
        var price = 50000 * 0.14;
      } else if (serviceType == 1 && serviceQty == 4) {
        var price = 100000 * 0.12;
      } else if (serviceType == 2 && serviceQty == 1) {
        var price = 10000 * 0.26;
      } else if (serviceType == 2 && serviceQty == 2) {
        var price = 25000 * 0.24;
      } else if (serviceType == 2 && serviceQty == 3) {
        var price = 50000 * 0.20;
      } else if (serviceType == 2 && serviceQty == 4) {
        var price = 100000 * 0.18;
      } else if (serviceType == 3 && serviceQty == 1) {
        var price = 10000 * 0.28;
      } else if (serviceType == 3 && serviceQty == 2) {
        var price = 25000 * 0.26;
      } else if (serviceType == 3 && serviceQty == 3) {
        var price = 50000 * 0.24;
      } else if (serviceType == 3 && serviceQty == 4) {
        var price = 100000 * 0.20;
      }
      $("#service_final_price").html('<br/><h3> .' + price.toFixed(0) + '/- Only</h3>');
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="form side-from" id="smsForm">
  <div class="form-group">
    <label for="serviceType">Service Type*</label>
    <select class="form-control" id="serviceType" required>
      <option value="0" selected="" disabled="">Select here</option>
      <option value="1">Service 1</option>
      <option value="2">Service 2</option>
      <option value="3">Service 3</option>
    </select>
  </div><br/>
  <div class="form-group">
    <label for="serviceQty">Quantity*</label>
    <select class="form-control" id="serviceQty" required>
      <option value="0" selected="" disabled="">Select here</option>
      <option value="1">10000</option>
      <option value="2">25000</option>
      <option value="3">50000</option>
      <option value="4">100000+</option>
    </select>
  </div><br/>
  <small class="form-text">(*) all fields are requied</small><br/>
  <button type="button" class="btn btn-primary col-12" id="calcValue">
    <span>Calculate</span>
  </button>
</form>

<div id="service_final_price" class="text-center">

I have tried if else it worked pretty much fine but I don't know how to convert it into a switch case.

Possible duplicate of [Switch statement multiple cases in JavaScript](https://stackoverflow.com/questions/13207927/switch-statement-multiple-cases-in-javascript) — Krishna Prashatt, Aug 09 '19 at 11:48
I know it is not the same. The crux is the fallback which was provided in the answer of that question. — Krishna Prashatt, Aug 09 '19 at 12:07
erm... where are `serviceType` and `serviceQty` magically appearing from? — Sean T, Aug 09 '19 at 12:42

score 0 · Answer 1 · answered Aug 09 '19 at 12:34

If you really want to do this on the client-side, it could be solved with a mapping with nested arrays:

const pricing = [
    /* this is the row for serviceType == 1 */ [ 10000 * 0.18, 25000 * 0.16, ... ],
    /* this is the row for serviceType == 2 */ [ 10000 * 0.26, 25000 * 0.24, ... ],
    /* etc. */
];

Note that this bit needs to be completed according to your original values.

Then you can access the individual prices like so:

const price = pricing[serviceType - 1][serviceQty - 1];

Make sure serviceType and serviceQty are in valid ranges to avoid problems with undefined values.

Keep in mind that prices calculated on the client-side could always be tempered with and should be recalculated/verified on the backend.

score 0 · Answer 2 · answered Aug 09 '19 at 12:51

If you REALLY want to use a switch statement i guess you could use some string representation of your values, for example:

switch(`${serviceType} ${serviceQty}`)
{           
    //Pair
    case '1 1': var price = 10000 * 0.18; break;
    case '1 2': var price = 10000 * 0.16; break; 
    case '2 1': var price = 10000 * 0.15; break;
    case '2 2': var price = 10000 * 0.14; break;
    // etc.
}

But I would suggest you use an object lookup like this:

prices = {};
prices[[1,1]] = 10000 * 0.18
prices[[1,2]] = 10000 * 0.16
prices[[2,1]] = 10000 * 0.15
prices[[2,2]] = 10000 * 0.14

var price = prices[[serviceType, serviceQty]]

score 0 · Answer 3 · answered Aug 12 '19 at 13:02

You can store your conditions in an object and evaluate the values using switch(true):

Although using a switch statement probably isn't the best approach here. If there's any logic into how prices are calculated based on the two conditional values it would be best to capture that logic and abstract the switch statement away with it.

$(function(){

  $('#calc').on('click', function (){
      var bulkType = parseInt($("#bulkType").val());
      var bulkQty = parseInt($("#bulkQty").val());

      var selectedValues = {
          bulkType : bulkType,
          bulkQty : bulkQty
      };
      console.log("values", selectedValues);

      switch(true)
      {
         case (selectedValues.bulkType === 0 && 
             selectedValues.bulkQty === 0):
             console.log("Select required fields");
             break;
         case (selectedValues.bulkType === 1 && 
             selectedValues.bulkQty === 1):
             console.log("1 & 1 selected");
             break;
         default:
             console.log("Fill out the other cases yourself!")
             break;
        }
   });
});

I want to change if else statement with switch case with multiple parameters

3 Answers3