Cannot read properties of undefined while populating API results in drop down

I am trying to pull GA4 Accounts from listAccounts() function and want to populate the drop-down field with GA4 List accounts on the HTML front-end.

When I try to click on the custom menu in google sheets, I get this error – TypeError: Cannot read properties of undefined (reading 'length')

HTML

<div class="form-group">
        
 <? var data = listAccounts() ?>
 
<optgroup label="Ad Accounts">

 <? for (i=0; i<data.propertyName.length; i++) { ?>
    <option value="<?= data.propertyName[i] ?>"> <?= data.propertyName[i] ?>) </option>

</optgroup>
 
  

    </div>

Code.gs

function listAccounts () {

const summaries = AnalyticsAdmin.AccountSummaries.list();

for (let i=0; i<summaries.accountSummaries.length;i++) {

            let propertyName = summaries.accountSummaries[i].displayName;
            
            return propertyName;
            

}                  
}



//Console.log >>> summaries.accountSummaries[0];

{ propertySummaries: 
   [ { parent: 'accounts/XXXX',
       property: 'properties/XXX',
       propertyType: 'PROPERTY_TYPE_ORDINARY',
       displayName: 'xxx' },
     { parent: 'accounts/xxxx',
       displayName: 'XXXX',
       property: 'properties/XXXX',
       propertyType: 'PROPERTY_TYPE_ORDINARY' } ],
  name: 'accountSummaries/XXXX',
  account: 'accounts/XXXX',
  displayName: 'SSSSSS' }               

List Function Execution Log

>Solution :

Here are a few things you can check for in your code:

Make sure that you have imported the necessary modules. It looks like you are using the AnalyticsAdmin module in your code, so you need to make sure that it is correctly imported at the top of your file.

Make sure that the listAccounts function is being called correctly. Make sure that you are calling it with the correct arguments, if any are needed.

Make sure that the for loop is correctly iterating over the accountSummaries array. Make sure that the loop variable (i) is correctly initialized and that the loop condition (i<summaries.accountSummaries.length) is correct.

Make sure that the displayName property of each AccountSummary object is being accessed correctly. Make sure that the object exists and that it has a displayName

property.

Make sure that the return statement is inside the loop. The way the code is currently written, the function will only return the first displayName it encounters and then exit the loop. If you want to return all of the displayNames, you will need to either append them to an array and return the array, or use a different method of returning multiple values.
Here is an example of how you could modify the function to return an array of displayNames:

    function listAccounts () {
  const summaries = AnalyticsAdmin.AccountSummaries.list();
  const names = [];
  for (let i=0; i<summaries.accountSummaries.length;i++) {
    names.push(summaries.accountSummaries[i].displayName);
  }
  return names;
}