Feature function in the map.on method

I’m getting the data, but the formatting is not correct. I’m selecting points, at the same point there may be more than one data. With the foreach the information goes out of the mode:

0102JohnBryan2019-03-122019-04-26image_car1.jpgimage_car2.jpg

It should have a format like this at the same point:

01 John 2019-03-12 image_car1.jpg

02 Bryan 2019-04-26 image_car2.jpg

I tried to put a for loop, but I’m very afraid that I mustn’t have applied it well because it hasn’t worked for me.

This is the code with the foreach loop:

map.on('click', function (evt) {
    //var feature = map.getFeaturesAtPixel(evt.pixel);
    var feature = map.getFeaturesAtPixel(evt.pixel,
    function(feature, layers) {
        return feature;
    });
    if (feature.length > 0) {
        var one = document.getElementById('code');
        one.innerHTML = '';
        var two = document.getElementById('autorOb');
        two.innerHTML = '';
        var three = document.getElementById('dateOb');
        three.innerHTML = '';
        var four = document.getElementById('ImgOb');
        four.innerHTML = '';
        feature.forEach(function(feature){
            one.innerHTML += feature.get('id_code');
            two.innerHTML += feature.get('autor');
            three.innerHTML += feature.get('obs_date');
            four.innerHTML += feature.get('image');
        })
    }
});

I tried:

for (i=0; i<feature.length; i++){
    one.innerHTML += feature.get('id_code');
    two.innerHTML += feature.get('autor');
    three.innerHTML += feature.get('obs_date');
    four.innerHTML += feature.get('image');
}

But feature is not a function

How can I do it?

var records = document.getElementById('records');
records.innerHTML = '';

feature.forEach(function(feature){
            records.innerHTML += '<div>';
            records.innerHTML += '  <div class="one">' + feature.get('id_code') + '</div>';
            records.innerHTML += '  <div class="two">' + feature.get('autor') + '</div>';
            records.innerHTML += '  <div class="three">' + feature.get('obs_date') + '</div>';
            records.innerHTML += '  <div class="four">' + feature.get('image') + '</div>';
            records.innerHTML += '</div>';
        })

feature.forEach(function(feature){
            one.innerHTML += feature.get('id_code') + '<BR />';
            two.innerHTML += feature.get('autor') + '<BR />';
            three.innerHTML += feature.get('obs_date') + '<BR />';
            four.innerHTML += feature.get('image') + '<BR />';
        })