Issue with using MultiLineString in Leaflet

Question

My response(restructured as in code below) from server is this

In order to use objects from this response for marker Animation in Leaflet I need to re-structure response as GeoJSON defines and I had to flip coordinates as Leaflet uses lat, lng and mine were lng,lat coming from Geoserver.

This is a good reference for GeoJSON standard and example for the datatype I need is MultiLineString, on page 24.

UPDATED:

I get proper JSON structure for MultiLineString, [[[lat,lng],[lat,lng]], [lat,lng],[lat,lng]]...] as u can see on first image.

If I use restructured variable (flippedCoords) to create a polyline and animate marker over it, it doesnt give me any error in console but it does give me bugs since other layers behave wierd as soon as response is loaded and I zoom in/out..

ajax call and attempt to structure response:

function getFinalRoute(){
var urlRoute = `${geoserver}/wfs?service=WFS&version=1.0.0&request=GetFeature&
typeName=xxx:shortestpath&viewparams=source:${source};target:${targetN || targetE}&outputformat=application/json
&srsName=EPSG:4326`;
var routeLayer = L.geoJSON(null);
var flippedCoords;
$.ajax({
    url: urlRoute,
    async: false,
    success: function(response){
                var routeArr = response.features;
                var coordsArr = Object.keys(routeArr).map(key => {
                    return routeArr[key]
                })
                    var xxy = coordsArr.map(function(feature){
                    var obj = feature.geometry.coordinates[0];
                    return Object.keys(obj).map(function(key){
                        return obj[key];                        
                    })
                })


                var flipCoor = L.GeoJSON.coordsToLatLngs(xxy, 1);
                flippedCoords = flipCoor.map(function(obj){
                    return Object.values(obj).map(function(obj){
                        return Object.values(obj)
                        })
                    })
//code below is from Animate marker plugin and works fine with linestring           
                var multiLineString =  L.polyline(flippedCoords); 
                var secondAnimated = L.animatedMarker(multiLineString.getLatLngs(), {
                                        distance: 10,
                                        interval: 2000,
                                        iconSize:[16,16],
                                        iconAnchor: [7, 16],
                                        //autostart: false,
                                        icon: pulsingIcon

                                    });

                routeLayer = L.geoJSON(response);   
                map.addLayer(secondAnimated);
    }   

});     

    map.addLayer(routeLayer);       

};

Answer 1

you can create empty_arr global object and everything will be okay I think look likes that.

          var empty_arr = new Array();
          success: function(response){
            var routeArr = response.features;
            routeArr.forEach(linePart => { 
                var coords = linePart.geometry.coordinates;
                coords.forEach(function(coord){
                    var newArray = coord;
                    var finalArr = newArray.map(function(obj){
                        return Object.values(obj).sort().map((value)=>{
                            return value

                        })
                    })
                    var flipCoor = L.GeoJSON.coordsToLatLngs(finalArr, 0);
                    var flippedCoor = flipCoor.map(function(obj){
                        return Object.keys(obj).sort().map(function(key){
                            return obj[key];
                            })
                    })

                     empty_arr.push(flippedCoor);...