CODEWITHSUNDEEP
javascriptjqueryajax
Papa.John
Papa.John

Reputation: 1

How can i reduce if-else statement

Are there are another ways to reduce this if-else statement? This code will change picture by got integers from database. I try to reduce this code. 

  if (val["soil_h"] < 21){
       $("#ground").attr('src', 'pic/ground1.png');
    } else if (val["soil_h"] < 42){
       $("#ground").attr('src', 'pic/ground2.png');
    } else if (val["soil_h"] < 63){
       $("#ground").attr('src', 'pic/ground3.png');
    } else if (val["soil_h"] < 84){
       $("#ground").attr('src', 'pic/ground4.png');
    } else if (val["soil_h"] < 105){
       $("#ground").attr('src', 'pic/ground5.png');
    } else if (val["soil_h"] < 126){
       $("#ground").attr('src', 'pic/ground6.png');
    } else if (val["soil_h"] < 147){
       $("#ground").attr('src', 'pic/ground7.png');
    } else {
       $("$ground").attr('src', 'pic/ground8.png');
    }

Upvotes: 0

Views: 106

Answers (5)

Dmytro Shevchenko
Dmytro Shevchenko

Reputation: 34611

One way that comes to mind is to chain ternary operators:

var soil = val["soil_h"];

var imagePath =
    soil < 21  ? 'pic/ground1.png' :
    soil < 42  ? 'pic/ground2.png' :
    soil < 63  ? 'pic/ground3.png' :
    soil < 84  ? 'pic/ground4.png' :
    soil < 105 ? 'pic/ground5.png' :
    soil < 126 ? 'pic/ground6.png' :
    soil < 147 ? 'pic/ground7.png' :
                 'pic/ground8.png';

$("#ground").attr('src', imagePath);

Upvotes: 3

Mehdi
Mehdi

Reputation: 7413

Another possibility using switch:

var imageName
    , soil = val["soil_h"]

switch(true) {
    case soil < 21:
        imageName = 'ground1.png'
        break
    case soil < 42:
        imageName = 'ground2.png'
        break
    case soil < 63:
        imageName = 'ground3.png'
        break
    case soil < 84:
        imageName = 'ground4.png'
        break
    case soil < 105:
        imageName = 'ground5.png'
        break
    case soil < 126:
        imageName = 'ground6.png'
        break
    case soil < 147:
        imageName = 'ground7.png'
        break
    default:
        imageName = 'ground8.png'
        break
}

$('#ground').attr('src', 'pic/' + imageName )

P.S. be aware that the selector of the last statement in the code you have shared looks incorrect: should probably be $("#ground") instead of $("$ground")

Upvotes: 1

zakaiter
zakaiter

Reputation: 439

Looking close to your code I visualise its only the multiple of 21. So this is what I wrote assuming val["soil_h"] is always a number.

Simple mathematics

       var x = parseInt(val["soil_h"]/21);
      if(x==0){
       x=1;
      }else if(x>8){
        x=8;
      }


       $("#ground").attr('src', 'pic/ground'+x+'.png');

Upvotes: 2

Rayon
Rayon

Reputation: 36609

Use /(division) as all the values are multiple of 21

Try this:

var value=val["soil_h"]/21;
$("#ground").attr('src', 'pic/ground"'+(value % 1 === 0 ? value : 8)+'".png'); //If value is not multiple of 21, default image is set..

Upvotes: 5

Bob Sponge
Bob Sponge

Reputation: 4738

var val = {
  soil_h: 43
};

var pics = [
  { url: 'pic/ground1.png', maxHeight: 21 },
  { url: 'pic/ground2.png', maxHeight: 42 },
  { url: 'pic/ground3.png', maxHeight: 63 },
  { url: 'pic/ground4.png', maxHeight: 84 },
  { url: 'pic/ground5.png', maxHeight: 105 },
  { url: 'pic/ground6.png', maxHeight: 126 },
  { url: 'pic/ground7.png', maxHeight: 147 },
  { url: 'pic/ground8.png', maxHeight: Number.MAX_VALUE },
];

$("#ground").attr('src', pics.find(function(pic) {
  return val["soil_h"]  < pic.maxHeight;
}).url);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="ground" />

Upvotes: 1

Related Questions