Interactive features in vector layers in openlayers 5 - vector

Question

I am using openlayers 5.1.3 and I confused as to how to create the functionality of clicking on a feature of a vector layer, get exactly the one I clicked and then get its properties. I am following this example that is the only relevant I found.
I have an empty vector source that gets GeoJSON data after search
initialize the map and the vector
this.vectorsource = new VectorSource({});
this.vectorlayer = new VectorLayer({
source: this.vectorsource
});
var selectClick = new Select({
condition: click
});
this.olmap.addInteraction(selectClick);
selectClick.on('select', function(e) {
console.log(e.target);
});
after the search
this.vectorsource.clear();
const fff = (new GeoJSON()).readFeatures(data.data);
this.vectorsource.addFeatures(fff);
The selectClick and addInteraction are the closest I got to what I want. I dont know how to proceed and I dont know if this is the right combination of methods to get the specific feature I clicked, so then I can get its properties. Also, what is weird to me is that I dont see any getFeature (not plular) method or functionality for vector layers.
How can I proceed?
Thanks

Answer 1

e.target (where e is the argument of the select callback function) has a getFeatures() method.
The code below will return the (first) selected feature:
var selectClick = new ol.interaction.Select({
condition: ol.events.condition.click
});
this.olmap.addInteraction(selectClick);
selectClick.on('select', function(e) {
var selectedFeatures = e.target.getFeatures().getArray();
var featuresStr = selectedFeatures[0].get('name');
console.log(featuresStr);
});
proof of concept example
code snippet:
var raster = new ol.layer.Tile({ // TileLayer({
source: new ol.source.OSM()
});
var vector = new ol.layer.Vector({ // VectorLayer({
source: new ol.source.Vector({ // VectorSource({
url: 'https://cdn.rawgit.com/johan/world.geo.json/master/countries.geo.json',
format: new ol.format.GeoJSON()
})
});
var map = new ol.Map({
layers: [raster, vector],
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
var selectClick = new ol.interaction.Select({
condition: ol.events.condition.click
});
map.addInteraction(selectClick);
selectClick.on('select', function(e) {
var selectedFeatures = e.target.getFeatures().getArray();
var featureStr = "none";
if (!!selectedFeatures && selectedFeatures.length > 0) {
featureStr = selectedFeatures[0].get('name');
}
console.log(featureStr);
document.getElementById('status').innerHTML = featureStr;
});
html,
body {
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
}
.map {
height: 95%;
width: 100%;
}
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.1.3/build/ol.js"></script>
<div id="status"></div>
<div id="map" class="map"></div>