Quiero crear varias listas desordenadas debajo de un div para mostrar una matriz multidimensional que creé anteriormente.
Tengo esto actualmente:
let divElementGroups = document.createElement("div"), numberOfulListItems = groups.length, ulListItemGroups = document.createElement("ul"), listItemGroups = document.createElement("li"), elementTitleGroups = document.createElement("span"); document.getElementById("teamsList").appendChild(divElementGroups); for (var i = 0; i < numberOfulListItems; i++) { divElementGroups.appendChild(ulListItemGroups); ulListItemGroups.appendChild(elementTitleGroups); elementTitleGroups.textContent = "Groep" + i; for (var j = 0; j < groups[i].length; j++) { listItemGroups.innerHTML = ArrayClass[i][j]; ulListItemGroups.appendChild(listItemGroups); } }Hasta donde yo sé, el primer ciclo for debería crear todas las listas desordenadas y el segundo debería poner todos los elementos de lista en estas listas desordenadas. Entonces, teóricamente, debería crear la lista desordenada y luego colocar un lapso con el "grupo 1" en la parte superior, seguido de todos los elementos en esa parte de la matriz.
Aquí hay una matriz de ejemplo:
var groups = [ [1, 2, 3], [4, 5, 6], [7, 8, 9] ];Al ejecutar el código con esto, la salida que da:
<div> <ul> <span>Groep1</span> <li>undefined</li> </ul> </div>Si bien debería dar esta salida:
<div> <ul> <span>Group 1</span> <li>1</li> <li>2</li> <li>3</li> </ul> <ul> <span>Group 2</span> <li>4</li> <li>5</li> <li>6</li> </ul> <ul> <span>Group 3</span> <li>7</li> <li>8</li> <li>9</li> </ul> </div>El problema con su código es que solo crea un elemento ul y solo un elemento li , antes de los bucles.
Luego, los bucles pasan estos dos elementos como argumento para appendChild , lo que significa que el único elemento ul , simplemente se mueve , no se duplica . Lo mismo sucede con el único elemento li .
Por lo tanto, debe crear un nuevo elemento ul en cada iteración del ciclo externo y un nuevo elemento li en cada iteración del ciclo interno.
Un problema menor es que i con 0, por lo que generaría "Groep 0". Si desea que comience con 1, debe generar "(i + 1)".
Supongo que se suponía que ArrayClass eran groups (o viceversa)
Código corregido:
var groups = [ [1, 2, 3], [4, 5, 6], [7, 8, 9] ]; let divElementGroups = document.createElement("div"), numberOfulListItems = groups.length; document.getElementById("teamsList").appendChild(divElementGroups); for (var i = 0; i < numberOfulListItems; i++) { let ulListItemGroups = document.createElement("ul"), elementTitleGroups = document.createElement("span"); divElementGroups.appendChild(ulListItemGroups); ulListItemGroups.appendChild(elementTitleGroups); elementTitleGroups.textContent = "Groep " + (i + 1); for (var j = 0; j < groups[i].length; j++) { let listItemGroups = document.createElement("li"); listItemGroups.innerHTML = groups[i][j]; //ArrayClass[i][j]; ulListItemGroups.appendChild(listItemGroups); } } <div id="teamsList"></div>Aquí hay una versión alternativa del script:
const groups = [ [1, 2, 3], [4, 5, 6], [7, 8, 9]]; document.body.insertAdjacentHTML("afterbegin", groups.map((gr,i)=>`<ul><span>Group ${i+1}</span>${gr.map(l=>`<li>${l}</li>`).join("")}</ul>`).join(""));