SELECT pgr.seq AS seq,
   pgr.edge AS edge,
   e.id AS id,
   SUM(e.distance) AS distance,
   st_linemerge(st_union(e.geom)) AS geom
   FROM pgr_dijkstra('SELECT id, source, target,onewayNum as cost, r_cost as 
   reverse_cost FROM parking.n_streets_noded',%source%,%target%, true) AS 
   pgr, parking.n_streets_noded  AS e 
   WHERE pgr.edge = e.id
   GROUP BY  pgr.seq, e.geom,e.name,e.type, pgr.seq, pgr.edge,e.id
 ORDER by pgr.seq

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){    
        console.log(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];                        
                    })
                })
   //code above gives me coordinates in perfect order but after applying this method below their order mixes up
                var flipCoor = L.GeoJSON.coordsToLatLngs(xxy,1);
                
                var flippedCoor = flipCoor.sort().map(function(obj){
                    return Object.values(obj).sort().map(values => {
                        return Object.values(values)
                    })
                }) 

//this line below helped me restructure MultiLineString into LineString like structure var myArray = [].sort().concat(...flippedCoor); //this is part from Animation Marker plugin which works nicely with LineStrings in my app
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);       

};

SELECT pgr.seq AS seq,
   pgr.edge AS edge,
   e.id AS id,
   SUM(e.distance) AS distance,
   st_linemerge(st_union(e.geom)) AS geom
  FROM pgr_dijkstra('SELECT id, source, target,onewayNum as cost, r_cost as 
   reverse_cost FROM parking.n_streets_noded',%source%,%target%, true) AS 
   pgr, parking.n_streets_noded  AS e 
 WHERE pgr.edge = e.id
 GROUP BY  pgr.seq, e.geom,e.name,e.type, pgr.seq, pgr.edge,e.id
 ORDER by pgr.seq

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){    
        console.log(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];                        
                    })
                })
   //code above gives me coordinates in perfect order but after applying this method below their order mixes up
                var flipCoor = L.GeoJSON.coordsToLatLngs(xxy,1);
                
                var flippedCoor = flipCoor.sort().map(function(obj){
                    return Object.values(obj).sort().map(values => {
                        return Object.values(values)
                    })
                }) 
 
              var myArray = [].sort().concat(...flippedCoor);

                console.log(myArray);

                var multiLineString = L.polyline(myArray);
                var secondAnimated = L.animatedMarker(multiLineString.getLatLngs(), {
                                        distance: 100,
                                        interval: 500,
                                        iconSize:[16,16],
                                        iconAnchor: [7, 16],
                                        //autostart: false,
                                        icon: pulsingIcon
                                    });
                        
                map.addLayer(secondAnimated);
                routeLayer = L.geoJSON(response)
        
            }
                
    })      
    map.addLayer(routeLayer);       
};

This response on image below is coming from Geoserver and I restructured it because it had coordinates as lng, lat and I need lat, lng as Leaflet defines. Also coordinate pairs were saved as object { } so I had to convert those to Arrays...

SELECT MIN(pgr.seq) AS seq,
   e.old_id AS id,
   e.name,
   e.type,
   SUM(e.distance) AS distance,
   ST_Collect(e.geom) AS geomFROM pgr_dijkstra('SELECT id, source, target,onewayNum as cost, r_cost as reverse_cost FROM parking.n_streets_noded',%source%,%target%, true) AS pgr, parking.n_streets_noded  AS e WHERE pgr.edge = e.id  GROUP BY e.old_id, e.name,e.type,e.geom

I have managed to get such JSON structure representing MultiLineString: [[[lat,lng],[lat,lng]], [lat,lng],[lat,lng]]...] as seen on image.

Problem is that I cant use restructured variable (see code below, flippedCoords) to animate marker over this L.polyline object, it doesnt give me any error response in console but it does give me bugs since other layers act wierd.. PS.The same workflow works fine with LineString data in the same app.

This is Animation Marker Plugin I use

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){    
        console.log(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);
                //console.log(flipCoor);
                flippedCoords = flipCoor.map(function(obj){
                    return Object.values(obj).map(function(obj){
                        return Object.values(obj)
                        })
                    })
                    //console.log(flippedCoords);
                //this is part from Animation Marker plugin which works nicely with LineStrings in my app                   
                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);       

This response on image below is coming from Geoserver as MultiLineString and I restructured it to LineString like on image because Animation plugin doesn`t support MultiPolyline json structure and because response has coordinates as lng, lat and I need lat, lng as Leaflet defines. This structure on image works nice with animation plugin.

Since Leaflet Animated Marker Plugin I use doesn't support MultiLineStrings I had to structure it as LineString. It accepts this LineString structure but coordinates are mixed after I apply coordsToLatLngs static method. That makes my marker not appearing on first position and jumping back and forth. Until this line of code coordinates are in right order, as defined in SQL View on Geoserver and I could check it and prove in DB and in QGIS

SELECT pgr.seq AS seq,
   pgr.edge AS edge,
   e.id AS id,
   SUM(e.distance) AS distance,
   st_linemerge(st_union(e.geom)) AS geom
   FROM pgr_dijkstra('SELECT id, source, target,onewayNum as cost, r_cost as 
   reverse_cost FROM parking.n_streets_noded',%source%,%target%, true) AS 
   pgr, parking.n_streets_noded  AS e 
   WHERE pgr.edge = e.id
   GROUP BY  pgr.seq, e.geom,e.name,e.type, pgr.seq, pgr.edge,e.id
 ORDER by pgr.seq

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){    
        console.log(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];                        
                    })
                })
   //code above gives me coordinates in perfect order but after applying this method below their order mixes up
                var flipCoor = L.GeoJSON.coordsToLatLngs(xxy,1);
                
                var flippedCoor = flipCoor.sort().map(function(obj){
                    return Object.values(obj).sort().map(values => {
                        return Object.values(values)
                    })
                }) 

//this line below helped me restructure MultiLineString into LineString like structure var myArray = [].sort().concat(...flippedCoor); //this is part from Animation Marker plugin which works nicely with LineStrings in my app
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);