Passing data to leaflet from ag-grid programmitically

I am a total javascript/leaflet/ag-grid newbie, so please bear with me.

I am trying to create a website that allows users to query (add/remove) spatial points on a leaflet map based on selecting rows from ag-grid. I have no understanding/experience with React or Angular, so I am using vanilla javascript. Leaflet is used to display the data spatially.

I have spatial data that has gps coordinates that are parent records. For each parent they have multiple children.

Spatial data

The spatial data is an external file I read into my HTML file. It looks like this:

var spatial_data = {
"type": "FeatureCollection",
"features": [
{ "type": "Feature", 
"properties": { "Name": "Boulder 1", "SpatialID": "Lower Blair_0" }, 
"geometry": { "type": "Point", "coordinates": [ -105.39079766, 41.19044516, 2510.159912109375 ] } },

{ "type": "Feature", 
"properties": { "Name": "Boulder 2", "SpatialID": "Upper Blair_1" }, 
"geometry": { "type": "Point", "coordinates": [ -105.39058423, 41.19655902, 2534.4599609375 ] } }
]};

Children records

There are children records for each parent spatial ID. The data is within the .js code

The functionality I am hoping for is someone could filter the ag-grid for a route called ‘Slam Dunk’ and that would provide the “SpatialID”:”Lower Blair_0″. If they filter for ‘Test two’ it provides the same SpatialID. This would be available to play around with in the HTML file.

myownscript.js

var rowData = [{"Route Name":"Slam Dunk","SpatialID":"Lower Blair_0"},
 {"Route Name":"Test two","SpatialID":"Lower Blair_0"},
 {"Route Name":"Test three","SpatialID":"Upper Blair_1"}];

var columnDefs= [
    {field: 'Route Name', minWidth:10, sortable:true, filter:true},
    {field: 'Sub-Area', minWidth:5, sortable:true, filter:true},       
];

const gridOptions = {
    columnDefs: columnDefs,
    rowData: rowData,
    defaultColDef:{
        flex:1,
        minWidth:100
    },
    rowSelection: 'multiple',
    pagination:true,
    onSelectionChanged:onSelectionChanged
};

function onlyUnique(value, index, self) {
    return self.indexOf(value) === index;
};

function onSelectionChanged(){
    var selectedRows = gridOptions.api.getSelectedRows();
    var selectedData = selectedRows.map(data => data.SpatialID);
  
    var test = selectedData.filter(onlyUnique);
   console.log(test); //This works. But I need to return an array that I can use elsewhere

   return test
};

document.addEventListener('DOMContentLoaded', () => {
    const gridDiv = document.querySelector('#myGrid');
    new agGrid.Grid(gridDiv, gridOptions);

});

I can easily send ‘test’ to the console. That provides me with the ability to check that my onSelectionChanged() is working; however, I really need to pass the output from onSelectionChanged() as an array. I need to pass that and use that in an embedded script within my html. This is so I can filter the data in my leaflet layers and features.

my html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
   
    <!-- Read in the geojson-->
    <script src='assets/spatialdata.json'></script>

    <script src="https://unpkg.com/[email protected]/dist/ag-grid-community.min.js"></script>
    <script src="myownscript.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script src="bstrap/js/bootstrap.min.js"></script>
    <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"></script>')</script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/bootstrap-table.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/ag-grid-community/dist/styles/ag-grid.css">
    <link rel="stylesheet" href="https://unpkg.com/ag-grid-community/dist/styles/ag-theme-alpine.css">

  </head>

  <body>
    <script >
        var usefulData = onSelectionChanged() 
        //Lots of leaflet type operations below this, like reading in geojson data.
    </script>
  </body>
</html>

I have tried extensive searching. For some reason, the majority of use cases for gridOptions.api.getSelectedRows() end with an example of using console.log(). I need to actually pass that information along instead of just outputting to the console. I am not sure if this is a misunderstanding on my part for how JS works, or if it is expected behavior from ag-grid, but it doesn’t seem possible. I have tried using global variables like so:

var test;
function onSelectionChanged(){
    var selectedRows = gridOptions.api.getSelectedRows();
    var selectedData = selectedRows.map(data => data.SpatialID);
  
  
    test = selectedData.filter(onlyUnique);
    return test
};
console.log(test);

This doesn’t seem to work as the console.log() in the .js file doesn’t work, and in the script in the HTML it can not find test.

I am primarily a statistician/python programmer, so this a new foray for me. It is likely I am missing a bigger picture thing and if so, I would appreciate alternatives to my current approach.