Multiple features in mapbox geojson from a query result

Queries and Resources
1

How can I populate the GeoJSON input box of the mapbox component with linestring features stored in a table column map_line and returned from a query. The closest I have gotten is to create a transformer that could convert each query result row into a usable GeoJSON string but it would only join the query results into a single linestring rather than creating a feature for each query result.

Any help is appreciated.
This is the result of my query with two results.

Untitled
Untitled3048×2030 439 KB

This is the code that generates a single line by joining both results (however, I am trying to create an unconnected line for each query result:
const rows = [{{Lines_bi.data}}];

const features = rows.map(row => {
const lineCoordinatesText = String(row.map_line);
const coordinates = lineCoordinatesText.match(/-?\d+(.\d+)?/g);
const lineCoordinates = coordinates
.reduce((acc, curr, index, array) => {
if (index % 2 === 0) {
acc.push([Number(curr), Number(array[index + 1])]);
}
return acc;
}, []);

return {
type: 'Feature',
geometry: {
type: 'LineString',
coordinates: lineCoordinates
},
properties: {}
};
});

const featureCollection = {
type: 'FeatureCollection',
features: features
};

const jsonString = JSON.stringify(featureCollection);

return jsonString;

2

Hey @Sum_Body! This might require some JS written in a JS Transformer (which I see you have a few of already). I don't know the exact code without diving deeper into your data and your use case, but I'd be happy to help debug if you have any JS you're currently working on!

3

I managed to hobble together some JS that crudely gets the job done... It may not be pretty but I'm quite new to SQL and JS.
This worked:
#var resultSet = Lines_bi.data;
console.log(resultSet); // Log resultSet to the Retool console for verification
var featuresArray = [];

// Assuming name, type, and coordinates are objects
for (var i = 0; i < Object.keys(resultSet.name).length; i++) {
var featureObj = {
type: "Feature",
geometry: {
type: "LineString",
coordinates: []
},
properties: {
name: resultSet.name[i],
type: resultSet.type[i]
}
};

var coordinatePairs = resultSet.coordinates[i].replace(/\[|\]/g, "").replace(/,/g, ";").split(";");
for (var j = 0; j < coordinatePairs.length; j += 2) {
    var lon = parseFloat(coordinatePairs[j].trim());
    var lat = parseFloat(coordinatePairs[j + 1].trim());
    featureObj.geometry.coordinates.push([lon, lat]);
}

featuresArray.push(featureObj);

}

var geoJsonObj = {
type: "FeatureCollection",
features: featuresArray
};

return JSON.stringify(geoJsonObj);

However I'm facing new struggles now but I'll be sure to come back for help when I can figure exactly what I'm trying to do.