Openlayers .getGeometry undefined (multilinestring object)

Question

I want to select and zoom on the map with multiple dropdown menus. I think I'm getting .getgeometry error on my second update because of CQL_FILTER to my URL. When I make the first selection, the selected features zoom in. Whichever of the second option I tick, I get an error.

const extentyol = yollar.getFeatures().getArray()[selectyol] .getGeometry().getExtent();

I get error in this part but it works fine in first part..

I don't understand where I am doing wrong. Where is my mistake?

   var url = 'http://localhost:8080/geoserver/kbs/ows? service=WFS&version=1.0.0&request=GetFeature&typeName=kbs:mahalle&outputFormat=application/json&SRS=EPSG:3857';
    $.getJSON(
        url,
        function (data) {
            loadFeatures(data);
        }
    );
       function loadFeatures(data) {
        // load vector source
        mahalle.getSource().addFeatures(new ol.format.GeoJSON().readFeatures(data));

        const featuresmah = mahalle.getSource().getFeatures();
        // add select options
        $.each(featuresmah, function (key, value) {
            $('#mahalleId').append('<option value=' + value.get('objectid') + '>' + value.get('yazi') + '</option>');
        });
        $('#mahalleId').on('change', function () {
            var selected = $('#mahalleId').val();
            const extentmah = mahalle.getSource().getFeatures()[selected]
                .getGeometry().getExtent();
            map.getView().fit(extentmah, map.getSize());
           
            $.ajax({
                method: 'GET',
                url: 'http://localhost:8080/geoserver/kbs/wfs',
                data: {
                    service: 'WFS',
                    request: 'GetFeature',
                    typename: 'kbs:yollar',
                    outputFormat: 'application/json',
                    cql_filter: "mahalle_id='" + mahalleId.value + "'",
                    srsname: 'EPSG:3857'
                },
                success: function (response) {
                    yollar.getSource().addFeatures(new ol.format.GeoJSON().readFeatures(response));
                    
                    map.getView().fit(yollar.getSource().getExtent());
             

                    const featuresyol = yollar.getSource().getFeatures();

                    $.each(featuresyol, function (key, value) {
                        $('#yolId').append('<option value=' + value.get('objectid') + '>' + value.get('sokak_adi') + '</option>');
                    });

                    $('#yolId').on('change', function (e) {
                        const selectyol = $('#yolId').val();
                       
                        const extentyol = yollar.getFeatures().getArray()[selectyol]
                            .getGeometry().getExtent();
                        map.getView().fit(extentyol, map.getSize());
                        console.log(selectyol.val());
                    });
                },
                fail: function (jqXHR, textStatus) {
                    console.log("Request failed: " + textStatus);
                }
            }); 
        })
    }[enter image description here][1]

Answer 1

I found a solution, I don't know why, but when using cql_filter, it is necessary to define the index of the object to run the '.getGeometry()' function. The '.getGeometry' function with Objectid does not work. I also did not recognize the index of the selected object as a variable, my problem was solved.