Populate data from an API call in a drop-down with a corresponding account id

I am extracting data from the GTM API to google sheets.

I have successfully achieved the API call to fetch all GTM accounts belonging to the user (On the front-end & server side), however, I am struggling with the API call to fetch a specific container for the selected account on the HTML side.

What I want to achieve:

So when the user selects an account, I want to populate the container name for that particular account selected in a drop-down. I am not sure how to call this function listContainers(accountId) function and populate the drop-down.

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;
}

I believe your goal is as follows.

• You have 2 dropdown lists. In your question, you didn't add the 2nd dropdown list.
• You want to set the values from listAccounts() to the 1st dropdown list.
• When the 1st dropdown list is selected, you want to set the values from listContainers(accountId) to the 2nd dropdown list.

Modification points:

• If your showing script and HTML are the actual situation, unfortunately, your HTML template is required to be modified. For example, those are ) of <?= data)[i].accountId ?>, <?= data)[i].name ?>.
• In your Google Apps Script, I cannot know your script for loading the HTML template.
• From your reply, I understood that your functions of listAccounts() and listContainers(accountId) work fine.

From this situation, how about the following sample script?

HTML & Javascript side:

Please set your HTML template as follows. In this case, your Google Apps Script is not modified.

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

  <label for="accountData2">Select Account2:</label>
  <select id="accountData2" style="width: 100%" onchange="select2(this)"></select>
</div>

<script>
function select1(e) {
  google.script.run.withSuccessHandler(ar => {
    const select = document.getElementById("accountData2");
    select.innerHTML = "";
    if (ar.length == 0) return;
    ar.forEach(({name}) => {
      const option = document.createElement("option");
      option.text = name;
      option.value = name;
      select.appendChild(option);
    });
  }).listContainers(e.value);
}

function select2(e) {
  alert(`${e.value} was selected.`);
}
</script>

• In this HTML & Javascript, when the HTML template is loaded, the 1st dropdown list is created by the value of listAccounts(). And, when a value is selected from the 1st dropdown list, the 2nd dropdown list is created by the selected value and the value of listContainers(accountId).

Note:

• I cannot know your script for loading the HTML template. So, I suppose that your Google Apps Script works fine. Please be careful about this.

Reference:

• Class google.script.run (Client-side API)