Datatable not populating if 2d data is created manually from array var instead of range.getDisplayValues() in Google Apps Script

Question

I am creating a Google Apps Script which takes the data from Google Sheets and renders it to jquery datatable.

CASE 1: (ifUsingSheetAsDB = TRUE) I am able to fetch and render the data successfully by filtering required data to a short Google sheet's table (short table) in a separate sheet from a large table (big table) using Google sheet's Filter formula and then reading that filtered table in my .gs file. This case in the code is wrapped with "ifUsingSheetAsDB"

My final data coming from .gs file to datatable is (in this case)

function userClickedCheck(name, code) {
  
  var ret = validator(name, code);  //name-code checker
  var range = wsTest.getRange("A2:A").getValues();  //short table is generated in the sheet Test here
  
  if(gInDebug || gAppDebug)
  {
    Logger.log("ret" + ret);  //checking validation
  }
  
  if(ret == 1)  //success
  {
    if(ifUsingSheetAsDB)  //reading "short table" from G Sheet
    {
      var rangelen = range.length;
  
      //Logger.log(range.getDisplayValues());
    
      var lastRow = getLastRowSpecial(range);  //custom function which finds the last filled row

      range = wsTest.getRange("A2:L" + (lastRow + 1));  //last filled row is the table length
      range = range.getDisplayValues();  //GSheet API returns string[][]
    }   
    else
    {
      //TODO without sheet as DB////////////////////////

      range = garySelectedRange;  //declared as let garySelectedRange = [];
      //TODO without sheet as DB end ////////////////////////
    }
  }
  else
  {
    range = [[]];
  }

  
  if(gAppDebug || gInDebug)
  {
    Logger.log("length of range " + range.length);  //Apps Script Point 1
    Logger.log(range);  //Apps Script Point 2
  }
  return range;
}

The range is captured in the datatable js as below:

function checkFinished(rangeValues)
{
  if ( ! table.data().any() ) 
  {
    //alert( 'Empty table' );
  }
  else
  {
    table
    .clear()
    .draw();
  }

  //var len2D = rangeValues.length;

  //alert("Reached inside SubmitFinished " + len2D);
  //TODO debug
  console.log("printing rangeValues " + rangeValues.length)  //console debug
  console.table(rangeValues);  //console debug
  //TODO debug end

  table.rows.add( rangeValues )
    .draw();
}

This is working real good. No issues here. I have read about range.getDisplayValues(); which returns string[][] according to https://developers.google.com/apps-script/reference/spreadsheet/range

Case 2: (ifUsingSheetAsDB = FALSE) Now I want to replace the data fetch and instead of using G Sheet's integrated Filter functions in the sheet, I am processing the whole "big table" by fetching data to .gs file and using my custom Filter:

function filterAndCreate(name)
{
  var inneri = 0;
  var innerj = 0;
  for (var i in garyRangePO)  
  {
    if(garyRangePO[i][1] == name)
    {
      garySelectedRange.push(
        [
        garyRangePO[i][0] + "/2122",
        garyRangePO[i][5],
        garyRangePO[i][6],
        garyRangePO[i][7],
        garyRangePO[i][8],
        garyRangePO[i][9],
        garyRangePO[i][10],
        garyRangePO[i][11],
        garyRangePO[i][12],
        garyRangePO[i][14],
        garyRangePO[i][13],
        garyRangePO[i][20]
        ]
        );
    }
  }

  if(gInDebug || gAppDebug)
  {
    Logger.log(garySelectedRange);   
  }
}

.js side it's the same function.

where garyRangePO is "big table" and garySelectedRange is "short table" and declared as let garyRangePO = []; let garySelectedRange = []; in global scope.

If I debug this in Apps Script, my debug points when success gives me something like this: CASE 1:

CASE 2:

Everything looks great till now from return value perspective too. For both the cases Apps Script debugger is showing type as

However, when I actually run my code... Case 1 console log (where data is properly populated to datatable and works like a charm):

Case 2 console log:

Now here I need help please. I am new to js and webapp and all. So please pardon me in advance. Thank you.

Answer 1

First of all, pardon me if my concepts are wrong, but I am yet a starter with all of these.

So basically, it looks like GAS is re-initiating globally scoped vars on the server-side every time before a function in the .gs (server-side code) is executed. Now to solve this issue, one can follow How to define global variable in Google Apps Script

It works but doesn't solve my query, as this [key, value] is same for every connection created to the app. Meaning, if two users are using this app simultaneously, irrespective of the function they are executing at T=t, this value will be same for both. I am not sure how to use this answer if someone is looking for a parallel multi-user app which shares a common DB written in the Sheets. (Maybe check for bind and release and add keys as an array representing each connection?)

Also, My code is using big sum of global data, and I feared saving that whole matrix in 'myvalue' and creating array for 'mykeys' for each connection,

PropertiesService.getScriptProperties().setProperty('mykey', 'myvalue'); 

var myvalue = PropertiesService.getScriptProperties().getProperty('mykey');

However, I had re-initiated required data every time when a function is executed for a connection according to the input from client-side js. I think this is not a solution, but this works and takes a bit more time while executing.