Passing variables to Html file in google scripts-CodePudding

I am trying to create an input tag for an HtmlTemplate function for each file in a folder on my google Drive.

This input tag works, but I'm trying to use variables to set the team (BAL) and the src id:

<input type="image"  onClick="getTeam('BAL');" src="https://drive.google.com/uc?id=12p5P6dmmHTX3PIq0kyUKr2qhWtSkmi3h">

This is the scriptlet in my html file:

<? var logos = getTeamLogos() ?>
<? for (i in logos) { ?>
    <input type="image"  onClick="getTeam('" logos[i][0] "');" src="https://drive.google.com/uc?id=" logos[i][1] "">
<? } ?>

And this is the getTeamLogos function I am calling:

function getTeamLogos(){
    var getLogos = DriveApp.getFolderById('redacted').getFiles();
    var logos = []
    while (getLogos.hasNext()) { 
        var logo = getLogos.next(); 
        var teamAbbrv = logo.getName(); 
        var logoId = logo.getId(); 
        logos.push([teamAbbrv,logoId]) 
        }
    logos.sort()
    console.log(logos)
    return logos 
}

Here's the console.log from the getTeamLogos function:

[ [ 'ANA', '1A8UJAYuKCter4V0gvd6nYP7z8G_QpWzK' ],   
[ 'BAL', '12p5P6dmmHTX3PIq0kyUKr2qhWtSkmi3h' ],   
[ 'BOS', '1AVMrn7E3fOlgFc_slCFPGQjFG2eauAKF' ],   
[ 'CLE', '1yY76xP_axJfbCmEZoSx2nDlILOaoKIBg' ],   
[ 'CWS', '1ZCPbHLQ_iIB8WSQ_sPYELiSw3p23uzc2' ],   
[ 'DET', '1GMmqhGr1eeCfoRgNMqliHFehwTopLVQE' ],   
[ 'HOU', '1iN-78qrvkT_E7K-CCUZbfdZV_o1vokPk' ],   
[ 'KC', '1vd_0mby6wV9qxSA4lvzBNPFi5bLnFsf3' ],   
[ 'MIN', '1HP5gArugPbXBlsCKrtYs0cPmIcff-Uf0' ],   
[ 'NYY', '1VIAYsnGgIKIG9VIIkcOVib446Wh2Ue1D' ],   
[ 'OAK', '1dYECC_EJwc2_e2WGJ_H5W0hvOAmv3w7V' ],   
[ 'SEA', '1jRotoBam7UFoCxpOxfBncdr6-JEcsnhq' ],   
[ 'TB', '10UlOIjit_K7Vmyna85aAztRuXzULnpb_' ],   
[ 'TEX', '1MgZfakotrGTrOotDVCNpehAKlWo7O4wp' ],   
[ 'TOR', '1RwmaPY8o5oPYs_hJCiEvvVe3NEE9Kuth' ] ]

But I keep getting a malformed HTML content error:

Exception: Malformed HTML content: <input type="image" onClick="getTeam('" logos[i][0] "');" src="https://drive.google.com/uc?id=" logos[i][1] ""> .

I've tried every combination of single quote, double quote, plus sign, ampersand, can't get the syntax quite right.

CodePudding user response：

I thought that in your HTML, the scriptlets are required to be modified as follows.

From:

<? var logos = getTeamLogos() ?>
<? for (i in logos) { ?>
    <input type="image"  onClick="getTeam('" logos[i][0] "');" src="https://drive.google.com/uc?id=" logos[i][1] "">
<? } ?>

To:

<? var logos = getTeamLogos() ?>
<? for (i in logos) { ?>
    <input type="image"  onClick="getTeam('<?= logos[i][0] ?>');" src="https://drive.google.com/uc?id=<?= logos[i][1] ?>">
<? } ?>

The scriptlets are replaced the HTML template with the values of Google Apps Script. Please be careful about this.

Note:

As additional information, in the current stage, when the loop process is used with the HTML template, the process cost will become high. Ref (Author: me) So, in your situation, I thought that the following modification might be able to be used.

HTML side
```
  <?!= values ?>
```

Google Apps Script side

  const html = HtmlService.createTemplateFromFile("index");
  html.values = getTeamLogos().map(([a, b]) => `<input type="image"  onClick="getTeam('${a}');" src="https://drive.google.com/uc?id=${b}">`).join("");
  const htmlOutput = html.evaluate();
  // You can use htmlOutput to Web Apps, sidebar, dialog, and so on.

Reference:

HTML Service: Templated HTML