Como dice el título, estoy tratando de generar dinámicamente mis botones HTML usando datos literales de objetos y usarlos para llenar el literal de la plantilla.

He estado intentando sin suerte y no puedo encontrar una respuesta sobre esto ...

Por favor, compruebe el código a continuación:

 const dockButtons = { 'list': [ { 'title': 'Search', 'icon': '<i class="bi bi-search"></i>', 'classes': 'dock-btn dock-btn-light', 'id': 'search-links-app-icon', 'attributes': 'type="button" accesskey="s"', 'onclick': '', 'access': '', }, { 'title': 'Notes & PDU Assist', 'icon': '<img class="dock-imgs" src="../assets/links-favicons/assist.svg">', 'classes': 'collapse dock-btn dock-btn-blue ms-2', 'id': 'notes-and-pdu-assist-app-icon', 'attributes': 'type="button"', 'onclick': 'closeMainCardsList();', 'access': '', }, ] }; const dockButtonsTemplate = `<button class="${classes} ${access}" id="${id}" onclick="${onclick}" ${attributes} title="${title}">${icon}</button>`; const generateDockButtons = dockButtons.list.map(dockButtonsTemplate); document.getElementById("dock-buttons-data").innerHTML = generateDockButtons.join("")

 <div id="dock-buttons-data"></div>

También me gustaría que fuera posible crear un condicional en la plantilla, donde si, por ejemplo, el valor del objeto onclick está en blanco, no lo cree en el literal de la plantilla.

Está funcionando (excepto la condición) si incluyo estas líneas:

 const dockButtonsTemplate = ({ title, icon, classes, id, attributes, onclick, access }) =>

Esto es algo que aprendí a usar recientemente, por lo que no puedo descifrar cómo eliminar el segundo fragmento anterior del tutorial del que lo obtuve. Me gustaría que busque directamente esos objetos si es posible.

También otra pregunta, ¿cuál es más rápido de cargar, si tengo, digamos, más de 3000 botones generados a partir de una plantilla O más de 3000 botones HTML codificados sin usar esta plantilla?