Estoy tratando de establecer dinámicamente opciones para un <select> . Al configurar la label para <outgroup> , la cadena se rompe antes de que se complete la frase. Por ejemplo, salida HTML: <optgroup label="Computers," electronics,="" & internet="" technology=""></optgroup>
Se supone que es "Computers, Electronics, & Internet technology"
let select = document.querySelector("#category"); const categoriesURL = "INSERT_URL"; let str = ""; fetch(categoriesURL) .then(response => response.json()) .then(data => { data.forEach(category => { let categoryTitle = category.title; str += `<optgroup label=${categoryTitle}></optgroup>` category.subcategories.forEach(sub => { let subcategories_id = sub.subcategories_id; let subcategoriesURL = `INSERT_URL/${subcategories_id}`; fetch(subcategoriesURL) .then(response => response.json()) .then(subData => { str += `<option value=${sub.subcategories_id}>` + subData.title + "</option>"; }) }) }) select.innerHTML = "<option disabled selected>Select a category</option>" + str; });Además, mis subcategorías no se llenan... No sé qué está mal aquí.
Prueba label="${categoryTitle}" con comillas, porque sin comillas generará
<optgroup label=Computers, Electronics, & Internet technology>
lo cual no es válido, por lo que el navegador agrega comillas alrededor de cada palabra y piensa que Electronics es otro atributo, lo que lleva a su problema.