How to get data from WFS geoserver in openlayers

Question

I have some points with its data coming from postgis to geoserver, then i added these points to my map but i need to display their information when i click them.

const approvedUsers = new ol.layer.Vector({
    title: 'Usuarios encuestados',
    source: new ol.source.Vector({
        format: new ol.format.GeoJSON(),
        url: function (extent) {
            return (
                'https://know.ncn.pe/geoserver/wfs?service=WFS&' +
                'version=1.1.0&request=GetFeature&typename=approvedUser&' +
                'outputFormat=application/json&srsname=EPSG:3857&' +
                'bbox=' +
                extent.join(',') +
                ',EPSG:3857'
            );
        },
        strategy: ol.loadingstrategy.bbox,
    }),
    style: new ol.style.Style({
        image: new ol.style.Icon({
            anchor: [0.5, 0.5],
            size: [28, 19],
            offset: [1, 1],
            scale: 1,
            src: 'assets/img/approvedUser.png',
        }),
    }),
});

tried to get data like this:

let clickeado = new ol.interaction.Select();
map.addInteraction(clickeado);

map.on('singleclick',function(e){
    approvedUsers.once('precompose',function(e){
        let seleccionado = clickeado.getFeatures();
        readFeatures(seleccionado);
    });
    function readFeatures(features){
        let dataFromWMS = features.item(0);
        console.log(dataFromWMS.get('construido'));
    }
});

This is data what i have in geoserver

Answer 1

i think this might be helpful for you!!

0

fetch('yourUrl', { method: 'POST', body: new XMLSerializer().serializeToString(featureRequest),

 }).then(response => response.json())

fetch('yourUrl', { method: 'POST', body: new XMLSerializer().serializeToString(featureRequest),

                                }).then(response => response.json())