Multiple Ternary Operators

Question

I need a bit of syntax help with a ternary operator which will help me to put the correct marker icons on to my good map.I have three areas 0,1 and 2 which have unique icons 0, 1 and 2.

I used to have just two areas so this ternary operator worked fine;

icon: (area == 1) ? icon1: icon0,

Now I need to add an additional third icon (icon2) for area2.

I've tried various methods but just can't seem to get it right.

Answer 1

The syntax would be:

icon: (area == 1) ? icon1 : (area == 2) ? icon2 : icon0,

But this is starting to get complicated. You may well be better off just creating a function to do this work instead:

icon: getIcon(area),

...

function getIcon(area) {
  if (area == 1) { 
    return icon1; 
  } else if (area == 2) { 
    return icon2; 
  }

  return icon0;
}

Answer 2

How about:

icon: [ icon0, icon1, icon2 ][area],

Answer 3

How about an object literal.

icons = {
    0: icon0,
    1: icon1,
    2: icon2
}

icon = icons[area];

Answer 4

Very simple way

If your object is like this:

var obj = {
  x: true,
  y: {
    xy: 'some value'
  }
}

var result = obj ? obj.y ? obj.y.xy ? obj.y.xy : 'N/A' : 'N/A' : 'N/A'

console.log(result) // "some value"

Answer 5

icon: (area == 0) ? icon0 : (area == 1) ? icon1 : icon2,

Answer 6

For anyone that's confused about the multiple ternary syntax (like I was), it goes like this:

var yourVar = condition1 ? someValue
            : condition2 ? anotherValue
            : defaultValue;

You can add as many conditions as you like.

You can read up further on https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator