如何在HTML端调用listContainers函数，根据选中的GTM账户填充容器下拉框

我正在将GTM API的数据提取至Google Sheets，已成功通过前后端API调用获取用户名下所有GTM账户，但在HTML端调用API获取选中账户对应的特定容器时遇到困难。需求是：当用户选中一个账户后，在下拉框中填充该账户对应的容器名称，目前不清楚如何调用listContainers(accountId)函数并完成下拉框的填充操作。

原代码 #

HTML代码 #

//API call to fetch all GTM accounts belonging to the user

<div class="form-group">

     <label for="accountData">Select Account:</label>
          <select id="accountData" style="width: 100%">

 <? var data = listAccounts() ?>

<? for (i=0; i<data.length; i++) { ?>
    
    <option value="<?= data)[i].accountId ?>" ><?= data)[i].name ?></option>
   <? } ?>
</optgroup>
 
   
   </select>
</div>

Code.gs代码 #

//**Console.log**

[ { accountId: 'xxxxx', name: 'ABC' },
  { accountId: 'xxxx', name: 'CBA' }]

function listAccounts() {
  // API call to fetch all GTM accounts belonging to a user
  return TagManager.Accounts.list({
    fields: 'account(accountId,name)'
  }).account;
}

// API call to fetch specific container for an account



//**Console.log**
    [ { name: 'acb.net', containerId: 'XXXX' },
    { name: 'DEF', containerId: 'XXXX' } ]


function listContainers(accountId) {
  // API call to fetch all containers belonging to a specific GTM account
  return TagManager.Accounts.Containers.list(
    'accounts/' + accountId,
    {fields: 'container(name,publicId)'}
  ).container;
}

解决方案 #

要实现账户选中后动态加载对应容器，需结合客户端JavaScript和Google Apps Script的google.script.run方法异步调用后端函数，具体步骤如下：

1. 修复HTML语法错误 #

原HTML存在两处错误：

• data)[i] 需改为 data[i]
• 移除多余的</optgroup>标签

2. 修改HTML添加容器下拉框与交互脚本 #

更新后的HTML新增容器选择下拉框，并添加事件监听实现动态加载：

<div class="form-group">
  <label for="accountData">Select Account:</label>
  <select id="accountData" style="width: 100%">
    <? var data = listAccounts() ?>
    <? for (let i=0; i<data.length; i++) { ?>
      <option value="<?= data[i].accountId ?>"><?= data[i].name ?></option>
    <? } ?>
  </select>
</div>

<div class="form-group">
  <label for="containerData">Select Container:</label>
  <select id="containerData" style="width: 100%" disabled>
    <option value="">请先选择账户</option>
  </select>
</div>

<script>
// 监听账户选择事件
document.getElementById('accountData').addEventListener('change', function() {
  const accountId = this.value;
  const containerSelect = document.getElementById('containerData');
  
  // 初始化加载状态
  containerSelect.innerHTML = '<option value="">加载中...</option>';
  containerSelect.disabled = true;
  
  // 调用后端函数获取容器数据
  google.script.run
    .withSuccessHandler(function(containers) {
      containerSelect.innerHTML = '';
      
      if (containers && containers.length > 0) {
        // 填充容器选项
        containers.forEach(container => {
          const option = document.createElement('option');
          option.value = container.containerId;
          option.textContent = container.name;
          containerSelect.appendChild(option);
        });
        containerSelect.disabled = false;
      } else {
        containerSelect.innerHTML = '<option value="">该账户无可用容器</option>';
      }
    })
    .withFailureHandler(function(error) {
      containerSelect.innerHTML = `<option value="">加载失败：${error.message}</option>`;
    })
    .listContainers(accountId);
});
</script>

3. 调整后端函数字段匹配 #

将listContainers函数的返回字段改为与控制台输出一致的containerId：

function listAccounts() {
  return TagManager.Accounts.list({
    fields: 'account(accountId,name)'
  }).account;
}

function listContainers(accountId) {
  return TagManager.Accounts.Containers.list(
    'accounts/' + accountId,
    {fields: 'container(name,containerId)'} // 匹配控制台输出的containerId字段
  ).container;
}

内容的提问来源于stack exchange，提问作者Arif Ahmed