Estoy tratando de concatenar una cadena de <optgroup> s y <option> s en función de categorías y subcategorías.

Actualmente, obtengo una cadena que tiene todas las categorías primero y luego todas las subcategorías. Necesito que vaya category > subcategories for said category etc.

El backend tiene dos tablas, categorías principales y subcategorías.

 Subcategory Table id title main_category_id Main Category Table id title

En mi código a continuación, estoy tratando de recorrer las categorías principales, agregándolas a un <optgroup> . Antes de pasar a la siguiente categoría principal, obtengo las subcategorías para cada una y las agrego como <option> s.

 let select = document.querySelector("#category"); let str = ""; async function getMainCategories() { const categoriesURL = "INSERT_URL" await fetch(categoriesURL) .then(response => response.json()) .then(async categories => { await categories.sort(function(a, b) { var nameA = a.title.toUpperCase(); // ignore upper and lowercase var nameB = b.title.toUpperCase(); // ignore upper and lowercase if (nameA < nameB) { return -1; } if (nameA > nameB) { return 1; } // names must be equal return 0; }).map(async cat => { str += `<optgroup label="${cat.title}">`; await getSubcategories(cat.id); console.log(str) str += '</optgroup>'; }) }); select.innerHTML = "<option disabled selected>Select a category</option>" + str; } async function getSubcategories(id) { let subcategoriesURL = `INSERT_URL?cat_id=${id}`; await fetch(subcategoriesURL) .then(response => response.json()) .then(subcategories => { subcategories.sort(function(a, b) { var nameA = a.title.toUpperCase(); // ignore upper and lowercase var nameB = b.title.toUpperCase(); // ignore upper and lowercase if (nameA < nameB) { return -1; } if (nameA > nameB) { return 1; } // names must be equal return 0; }).map(sub => { return str += `<option value="${sub.id}">${sub.title}</option>`; }) }); } getMainCategories();