how can i use 3 conditions or more in js jquery?

Question

my code is like :

Marker = new google.maps.Marker({
                position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                map: map,
                icon: locations[i][5] === 'Red' ? red_icon : locations[i][5] === 'Purple' ? 
                purple_icon : blue_icon

            });

i set condition for the icon if red then it will be use the red icon if purple then purple icon else it will be use blue for all otherwise.... ** my problem when i add another condition the code didn't work anymore... like :

icon: locations[i][5] === 'Red' ? red_icon : locations[i][5] === 'Purple' ? 
                purple_icon : locations[i][5] === 'blue' ? blue_icon : green_icon

Does [this](https://stackoverflow.com/questions/7757549/multiple-ternary-operators) answer the question? — xKobalt, Sep 03 '20 at 09:37

score 1 · Accepted Answer · answered Sep 03 '20 at 09:40

switch-case to the rescue:

let whatIconToUse = green_icon;

switch(locations[i][5]) {
    case 'Red':
        whatIconToUse = red_icon;
        break;
    case 'Purple':
        whatIconToUse = purple_icon;
        break;
    case 'blue':
        whatIconToUse = blue_icon;
        break;
    default:
        whatIconToUse = green_icon;
        break;
}

Marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map,
    icon: whatIconToUse 
});

Zauker · Answer 2 · 2020-09-03T09:49:08.757

Consider to use a switch statement

    let icon = '';
    switch(locations[i][5]) {
      case "Red":
        icon = red_icon
        break;
      case "Purple":
        icon = purple_icon
        break;
      case "blue":
        icon = blue_icon
        break;
    }

    Marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][1], locations[i][2]),
      map: map,
      icon: icon
    });

or you can use a (dirty) trick

    Marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][1], locations[i][2]),
      map: map,
      icon: eval(locations[i][5].toLowerCase() + '_icon')
    });

score 1 · Answer 3 · answered Sep 03 '20 at 09:44

1

I would suggest you use an associative array for this:

var iconMap = {
 'Red': red_icon,
 'Blue': blue_icon,
 // etc
}

Then your code becomes much simpler to read:

var icon = locations[i][5];
Marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            map: map,
            icon:  iconMap[icon]
        });

answered Sep 03 '20 at 09:44

Jamiec

133,658
13
134
193

No need for an associative array. Red becomes red, Purple becomes purple, Green becomes green... See a pattern here? No need to list all possible colors one by one. – Jeremy Thille Sep 03 '20 at 09:52
@JeremyThille you've misunderstood the detail as I posted under your answer. Its a _variable_ `red_icon` not the string "red_icon". I'm associating the string "Red" with the variable `red_icon` – Jamiec Sep 03 '20 at 09:53
Ah, right, but what does these variables contain? Why are they not just strings? The [documentation](https://developers.google.com/maps/documentation/javascript/custom-markers) says they should be just strings, paths to image file (icon.png) – Jeremy Thille Sep 03 '20 at 09:54
@JeremyThille because quite often you have meaningful variable names `red_icon` pointing to a resource such as "Some_icon_file.ico" – Jamiec Sep 03 '20 at 09:56
Sounds overkill to me. We could just have `\`path/to/icons_folder/${color}_icon.png\`` – Jeremy Thille Sep 03 '20 at 09:57
1

...and that is indeed what _I_ would do! But it doesn't answer *this* question! – Jamiec Sep 03 '20 at 09:58

score 0 · Answer 4 · answered Sep 03 '20 at 09:38

You need to use parenthesis in order to nest ternary operators (those of form boolean ? value_if_true : value_if_false

In your particular case,

icon: locations[i][5] === 'Red' ? red_icon : (locations[i][5] === 'Purple' ? 
                purple_icon : (locations[i][5] === 'blue' ? blue_icon : green_icon))

However, a switch statement would make things much more readable and easily extendable:

let color;
switch(locations[i][5]) {
    "Red": { color = red_icon; break; }
    "Purple": { color = purple_icon; break; }
    // add all cases here
}

score -1 · Answer 5 · answered Sep 03 '20 at 09:50

-1

And why not simply :

icon: locations[i][5].toLowerCase() + "_icon"

"Red" -> "red_icon"

"Purple" -> "purple_icon"

answered Sep 03 '20 at 09:50

Jeremy Thille

26,047
12
43
63

I'd assume that the _variable_ `red_icon` may well hold something along the lines of "xyz123abc.jpg". – Jamiec Sep 03 '20 at 09:52
I don't get it? – Jeremy Thille Sep 03 '20 at 09:53

how can i use 3 conditions or more in js jquery?

5 Answers5