How can I map the object key and value in option HTML tags in appscript

I am retrieving this below object from a function in Code. gs. I would like to pass the key-value pair into my HTML drop-down button.

How can I map the object key and value in option HTML tags?

HTML

<div class="form-group">
        <? var data = listAccounts() ?>
    <optgroup label="Ad Accounts">
        <? for (i=0; i<data.length; i++) { ?>
        <option value="<?= data[i] ?>"> <?= data[i] ?>) </option>
    </optgroup>
</div>

Example Object Returned from a function listAccounts()

{ 
  'abc': 'accountSummaries/123',
  'def': 'accountSummaries/124',
  'ghi': 'accountSummaries/125',
  'jkl Accounts': 'accountSummaries/1405'
}

>Solution :

Hmm, it’s the Javascript section, so I guess… this should do the job?
https://jsfiddle.net/MarinHTML/z29o5kaj/11/

var abc = { 'abc': 'accountSummaries/123',
  'def': 'accountSummaries/124',
  'ghi': 'accountSummaries/125',
  'jkl Accounts': 'accountSummaries/1405'
  };
  

for(let i=0;i<Object.keys(abc).length;i++) {
    $('#gg').append('<option data-key="'+Object.keys(abc)[i]+'" data-value="'+Object.values(abc)[i]+'">'+Object.values(abc)[i]+'</option>')
}
  

^Example mapping using jQuery. Or do you want to do it with PHP? This can also work, but you must point out where you want the key and where you want the value.