Styling features based on attribute values - openlayers-3

Question

How does one style features based on attributes/properties? Currently I am doing the following:
olLayer = new ol.layer.Vector( {
source: new ol.source.Vector( {
features: featureArray
} ),
style: ( function() {
var styleR3 = new ol.style.Style( {
image: new ol.style.Circle( {
radius: 10,
fill: new ol.style.Fill( {
color: 'blue'
} )
} )
} );
var styleCatchAll = new ol.style.Style( {
image: new ol.style.Circle( {
radius: 5,
fill: new ol.style.Fill( {
color: 'red'
} )
} )
} );
return function( feature, resolution ) {
if ( feature.attributes[ "Rank" ] === "3" ) {
return styleR3;
} else {
return styleCatchAll;
}
};
}() )
} );
The select features does work but the styleR3 does not get applied.

Answer 1

Here it is ... http://jsfiddle.net/jonataswalker/g3s96auc/
The style function requires an array on return, and you are using a self execution function, I don't know if this works, anyway, the style function became:
style: function(feature, resolution){
var styleR3 = new ol.style.Style( {
image: new ol.style.Circle( {
radius: 10,
fill: new ol.style.Fill( {
color: 'blue'
} )
} )
} );
var styleCatchAll = new ol.style.Style( {
image: new ol.style.Circle( {
radius: 5,
fill: new ol.style.Fill( {
color: 'red'
} )
} )
} );
if ( feature.get('rank') == 3) {
return [styleR3];
} else {
return [styleCatchAll];
}
}