CODEWITHSUNDEEP
javascript
Anthony
Anthony

Reputation: 35958

How to output values with ternary operation with three outcomes

I'm looping through an array of arrays. Each element has three values. The third value can be High, Med, or Low

I would like to output 

http://maps.google.com/mapfiles/ms/icons/red-dot.png for High
http://maps.google.com/mapfiles/ms/icons/yellow-dot.png for Med
http://maps.google.com/mapfiles/ms/icons/green-dot.png for Low

Here is what I have that works perfectly fine for when the value is High (outputs red) or outputs green. 

for( i = 0; i < markers.length; i++ ) {
    var position = new google.maps.LatLng(markers[i][0], markers[i][1]);
    bounds.extend(position);
    marker = new google.maps.Marker({
        position: position,
        icon: markers[i][2] === 'High'? 'http://maps.google.com/mapfiles/ms/icons/red-dot.png' : 'http://maps.google.com/mapfiles/ms/icons/green-dot.png',
        map: map,
        title: "",
    });
}

Question

How can I make this work for High, Med, Low as described above?

Upvotes: 1

Views: 54

Answers (3)

Sudhansu Choudhary
Sudhansu Choudhary

Reputation: 3360

I understand it would not be a pretty read but in case you want to use only ternary operator , nest (markers[i][2] === 'Med'? '': '') condition for falsy condition of markers[i][2] === 'High'?. 

icon: markers[i][2] === 'High'? 'http://maps.google.com/mapfiles/ms/icons/red-dot.png' 
: (markers[i][2] === 'Med'? 'http://maps.google.com/mapfiles/ms/icons/yellow-dot.png'
:'http://maps.google.com/mapfiles/ms/icons/green-dot.png')

Upvotes: 2

Wander Nauta
Wander Nauta

Reputation: 19625

You could use an object:

var icons = {
    "High": "http://maps.google.com/mapfiles/ms/icons/red-dot.png",
    "Med": "http://maps.google.com/mapfiles/ms/icons/yellow-dot.png",
    "Low": "http://maps.google.com/mapfiles/ms/icons/green-dot.png",
};

Then use icon: icons[markers[i][2]] or something similar.

Upvotes: 4

dfsq
dfsq

Reputation: 193271

Create simple map object:

var icons = {
    High: "http://maps.google.com/mapfiles/ms/icons/red-dot.png",
    Med: "http://maps.google.com/mapfiles/ms/icons/yellow-dot.png",
    Low: "http://maps.google.com/mapfiles/ms/icons/green-dot.png"
};

and use it like this:

for ( i = 0; i < markers.length; i++ ) {
    var position = new google.maps.LatLng(markers[i][0], markers[i][1]);
    bounds.extend(position);
    marker = new google.maps.Marker({
        position: position,
        icon: icons[markers[i][2]],
        map: map,
        title: "",
    });
}

Upvotes: 3

Related Questions