information about diferents layers map.on method from features

Question

How can I display all the properties of a feature using the map.forEachFeatureAtPixel method? I get a single value, I try to put a for loop to get all the properties, but it doesn't support it. I have this code that works to get a single value. Using forEachFeatureAtPixel allows me to choose the layer on which I want to display information. This is the code

map.on('click', function (evt) {
    document.getElementById("divInformation").innerHTML = '<h1>Click for Info</h1>';
    var layer;
    var feature = map.forEachFeatureAtPixel(evt.pixel,
      function(feature, featureLayer) {
        layer = featureLayer;
        return feature;
    });
    var el = document.getElementById('divInformation');
    el.innerHTML = '';
        if(layer === vectorLayer1){
            el.innerHTML +=  feature.get('cod');
            el.innerHTML += feature.get('date);
        }else if(layer === vectorLayer2){
            el.innerHTML += feature.get('name');
            el.innerHTML += feature.get('Percent');
         }else{
             el.innerHTML = '<h1>click for Info</h1>';
         }
});

Answer 1

To display all properties of a feature use JSON.stringify(feature.getProperties()) as in https://openlayers.org/en/latest/examples/vector-tile-info.html

For more control over formatting use a for ... in loop. You could then exclude internal property keys such as geometry which would not be meaningful when displayed.

var key;
var properties = feature.getProperties();
for (key in properties) {
  el.innerHTML +=  key + ': ' + properties[key];
}