javascriptdictionarygoogle-apps-scriptweb-applicationstypeerror

"TypeError: Failed due to illegal value in property: 0" when sending a Map object to Apps Script server

I'm working on a Google Apps Script project bound to a Spreadsheet. For a certain functionality, I display a modal dialog as follows: Modal dialog. So, a series of selectors, variable in number, that are created and loaded dynamically depending on some data. Each selector is contained within a <li> list element of a <menu> unordered list: <menu id="categories"></menu>.

Upon clicking on the 'Ok' button, a certain function is called; here is the HTML element:

<!-- An 'Ok' button to continue. -->
<input type="button" value="Ok" onclick="endDialog()" />

Now, this function endDialog extracts the data from the selectors, and builds a Map<number, number> object and an array, which in turn are passed as arguments to a server-side Apps Script function.

And here comes the problem: the endDialog function does everything correctly until the google.script.run.applyColouring(rowPairs, colourAvailabilities);, at which point I get the uncaught error described in the title:

TypeError: Failed due to illegal value in property: 0

Error

Here are some insights:

Legal parameters and return values are JavaScript primitives like a Number, Boolean, String, or null, as well as JavaScript objects and arrays that are composed of primitives, objects and arrays. A form element within the page is also legal as a parameter, but it must be the function’s only parameter, and it is not legal as a return value. Requests fail if you attempt to pass a Date, Function, DOM element besides a form, or other prohibited type, including prohibited types inside objects or arrays. Objects that create circular references will also fail, and undefined fields within arrays become null.

Here is the whole HTML-side function endDialog:

  /**
   * Calls a server-side function to apply the changes \
   * to the categories' colours and closes the dialog.
   * 
   * @return {void} Nothing.
   */
  function endDialog() {
    // Hide the error messages.
    document.getElementById("emptyColour").style = "display:none;";
    document.getElementById("repeatedColour").style = "display:none;";
    // Get the list of categories.
    const categories = Array.from(document.getElementById("categories").children);
    // Create a map to contain the list of category-colour pairs.
    const rowPairs = new Map();
    // Create an array to contain the column of boolean values
    // corresponding to the availabilities of each colour palette.
    // Initialise all colours as being available.
    const colourAvailabilities = Array.from({length:10}).map(() => [true]);
    // A variable to see if all colours have been selected properly.
    var validSelects = true;
    // A variable to see if all colours are different from each other.
    var uniqueSelects = true;
    // Initialise an index variable to go through the categories.
    var i=0;
    // While the colours are validly selected,
    // and unique, go through the categories.
    while (validSelects && uniqueSelects && i<categories.length) {
      // Get the corresponding row number,
      let catRow = Number(categories[i].value);
      // and its chosen colour's row number.
      let colourRow = Number(document.getElementById(i+1)
                                     .value
                                     .split(',')[0]);
      // Check if the selected option is a valid colour.
      validSelects = colourRow != 0;
      // If the selected option is a valid colour,
      if (validSelects) {
        // set the corresponding colour to being unavailable.
        colourAvailabilities[colourRow-6][0] = false;
        // Add the rows pair to the map.
        // Use the colour row number as the key, so as to easily check whether the
        // number of categories and the number of key-value pairs in the map are equal.
        // Indeed, if this colour has already been used, no new key-value pair will
        // be added, instead just updating the value associated to the colour's row key.
        rowPairs.set(colourRow, catRow);
        // Check if all selected colours are different from each other.
        uniqueSelects = rowPairs.size == i+1;
      }
      // Go to the next category.
      i++;
    }
    // If the user has made a valid and unique colour selection,
    if (validSelects && uniqueSelects) {
      console.log(rowPairs, colourAvailabilities);
      // call a server-side function to apply the changes.
      google.script.run.applyColouring(rowPairs, colourAvailabilities);
      // Close the dialog.
      google.script.host.close();
    }
    // If one of the selected colours is invalid,
    else if (!validSelects) {
      // display an error message.
      document.getElementById("emptyColour").style = "display:block;";
    }
    // If some colour has been selected more than once,
    else {
      // display an error message.
      document.getElementById("repeatedColour").style = "display:block;";
    }
  }

I don't believe my sharing of the rest of the code is necessary, but if you want/need either the server-side function code, or the whole HTML file, I can post them.

If anyone knows what the problem is, I'm all ears! Thanks in advance.

Solution

  • You cannot send a Map object through the google.script.run interface because Maps cannot be serialized.

    From the documentation:

    No native support for serialization or parsing.(But you can build your own serialization and parsing support for Map by using JSON.stringify() with its replacer argument, and by using JSON.parse() with its reviver argument. See the Stack Overflow question How do you JSON.stringify an ES6 Map?).

    So either use a plain vanilla Object, or serialize the Map with JSON.stringify() at the sending end and JSON.parse() at the receiving end with your own replacer and reviver functions.