En el código a continuación, no estoy undefined como el valor de los subs y no estoy seguro de por qué. Soy relativamente nuevo en el trabajo con Promises y funciones asíncronas, así que estoy seguro de que me estoy perdiendo algo aquí.

 let select = document.querySelector("#category"); async function getMainCategories() { const categoriesURL = "INSERT_URL/categories_main"; return await fetch(categoriesURL) .then((response) => response.json()) .then((categories) => { categories .sort(function (a, b) { var nameA = a.title.toUpperCase(); var nameB = b.title.toUpperCase(); if (nameA < nameB) { return -1; } if (nameA > nameB) { return 1; } return 0; }) .map((cat) => { const subs = Promise.all(getSubcategories(cat.id)); //err - object is not iterable return `<optgroup label="${cat.title}">${subs}</optgroup>`; }); }); } async function getSubcategories(id) { let subcategoriesURL = "INSERT_URL/subcategories"; return await fetch(subcategoriesURL) .then((response) => response.json()) .then((subcategories) => { subcategories .sort(function (a, b) { var nameA = a.title.toUpperCase(); var nameB = b.title.toUpperCase(); if (nameA < nameB) { return -1; } if (nameA > nameB) { return 1; } // names must be equal return 0; }) .filter((subcategory) => subcategory.categories_main_id === id) .map((sub) => { return `<option value="${sub.id}">${sub.title}</option>`; }); }); } async function setHTML() { console.log(await getMainCategories()); // undefined select.innerHTML = "<option disabled selected>Select a category</option>" + (await getMainCategories()); } setHTML();