Why this try of recovering an array from the `e.parameter.variableName` method is not working?

Question

What is going wrong with this code? When I log the array list, before the sumbit function, its ok (with the expected content and position of elements inside it's arrays). But, when I get it through e.parameter.arrayListit doesn't have the same value, neither it's elements. How to fix that?

function showList(folderID) {
  var folder = DocsList.getFolderById(folderID);
  var files = folder.getFiles();
  var arrayList = [];
  for (var file in files) {
    file = files[file];
    var thesesName = file.getName();
    var thesesId = file.getId();
    var thesesDoc = DocumentApp.openById(thesesId);
    for (var child = 0; child < thesesDoc.getNumChildren(); child++){
    var thesesFirstParagraph = thesesDoc.getChild(child);
    var thesesType = thesesFirstParagraph.getText();
      if (thesesType != ''){
         var newArray = [thesesName, thesesType, thesesId];
         arrayList.push(newArray);
         break;
         }
      }
   }
    arrayList.sort();
    var mydoc = SpreadsheetApp.getActiveSpreadsheet();
    var app = UiApp.createApplication().setWidth(550).setHeight(450);
    var panel = app.createVerticalPanel()
                   .setId('panel');

    var label = app.createLabel("Choose your theses").setStyleAttribute("fontSize", 18);
    app.add(label);
    panel.add(app.createHidden('checkbox_total', arrayList.length));
    panel.add(app.createHidden('arrayList', arrayList)); 
    Logger.log(" arrayList before submit = " + arrayList);


    for(var i = 0; i < arrayList.length; i++){      
      var checkbox = app.createCheckBox().setName('checkbox_isChecked_'+i).setText(arrayList[i][0]);
      Logger.log("arrayList[i][0] = " + arrayList[i][0]);
      Logger.log("arrayList[i] ====> " + arrayList[i]);
      panel.add(checkbox);
   }
   var handler = app.createServerHandler('submit').addCallbackElement(panel);
   panel.add(app.createButton('Submit', handler));
   var scroll = app.createScrollPanel().setPixelSize(500, 400);  
  scroll.add(panel);
  app.add(scroll);
  mydoc.show(app);


}

function include(arr, obj) {
    for(var i=0; i<arr.length; i++) {
        if (arr[i] == obj) // if we find a match, return true
            return true;    }
    return false; // if we got here, there was no match, so return false
 }

function submit(e){
   Logger.log(" arrayList = " + arrayList);
  var arrayList = e.parameter.arrayList;
  var numberOfItems = Number(e.parameter.checkbox_total);
  var thesesArrays = [];
  var usedThesesType = [];
  var usedThesesName = [];
  for(var i = 0; i < numberOfItems; i++){
    if(e.parameter['checkbox_isChecked_'+i] == 'true'){
     Logger.log(" arrayList inside for loop = " + arrayList);
      Logger.log(" arrayList[i] = " + arrayList[i]);
      thesesArrays.push(arrayList[i]);
      usedThesesType.push(arrayList[i][1]);
            Logger.log(" arrayList[i][1] = " + arrayList[i][1]);

      usedThesesName.push(arrayList[i][0]); 
       Logger.log(" arrayList[i][0] = " + arrayList[i][0]);
     }
   }
  var allThesesTypeArray = []; // To control Theses type apparence in the final doc
  for (var i = 0; i < arrayList.length; i++) {
     var thesesType = arrayList[i][1];
     if ( !(include(allThesesTypeArray, thesesType)) ){
        allThesesTypeArray.push(thesesType);     }
   }
  var targetDocId = userProperties.getProperty('targetDocId');
  for (var i = 0; i < thesesArrays.length; i++) {
     var thesesType = thesesArrays[i][1];
    Logger.log(" thesesArrays = " + thesesArrays);
     var thesesId = thesesArrays[i][2];
     importTheses(targetDocId, thesesId, thesesType);       
    }   
  cleanNotUsedThesesTitles(targetDocId, allThesesTypeArray, usedThesesType);
  if(userProperties.getProperty('atLeastOneTheseType') == 0){
      Browser.msgBox('There was no theses inside your model. Check it!');
  }  
  var joinAndInsert = userProperties.getProperty('joinAndInsert');  
  showURL(usedThesesName, joinAndInsert);
  return UiApp.getActiveApplication().close();
}

Answer 1

I think there is a mistake because you have written:

for (var file in files) {
    file = files[file];

where the variable file is the index of your array, so you are changing that value in your bucle. Have you tried to use another name like:

for (var file in files) {
    f = files[file];

Answer 2

You can't simply pass an Array into a form field and get the value of that array back. This is the exact same problem as you asked about on Get String Value of Blob Passed to e.parameter in Apps Script . The only difference is now you are trying to pass an Array around instead of a Blob.

You can only pass Strings as the value of the field, so you need to convert your data (arrayList) into a string. Then you need to convert that string back into an Array. Do this using JSON.stringify() and JSON.parse().

Change

panel.add(app.createHidden('arrayList', arrayList));

to

panel.add(app.createHidden('arrayList', JSON.stringify(arrayList)));

and change

var arrayList = e.parameter.arrayList;

to

 var arrayList = JSON.parse(e.parameter.arrayList);

Answer 3

You should be getting an object being passed and assigned to the e argument. You can iterate through that object to see what the properties and the values are:

function submit(e) {
  Logger.log("submit ran: " + e);
  Logger.log("values?: " + e.values);

  for(var propertyName in e) {

    Logger.log("propertyName: " + propertyName);
    Logger.log("This property value is: " + e[propertyName]);
    Logger.log(" ");
  }
}