I want to create multiple unordered lists underneath a div to display a multidimensional array I previously created.
I have this currently:
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);
}
}
As far as I know, the first for loop should create all the unordered lists and the 2nd one should put all the listitems in these unordered lists. So theoretically, it should create the unordered list and then put a span with "group 1" at the top, followed with all the items in that part of the array.
Here's an example array:
var groups = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
];
When running the code with this, the output it gives:
<div>
<ul>
<span>Groep1</span>
<li>undefined</li>
</ul>
</div>
While it should give this output:
<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>
The problem with your code is that it only creates one ul element, and only one li element -- before the loops.
The loops then pass these two elements as argument for appendChild, which means the single ul element, just gets moved, not duplicated. The same happens with the single li element.
So, you should create a new ul element in each iteration of the outer loop, and a new li element in each iteration of the inner loop.
A minor issue is that i starts with 0, so it would output "Groep 0". If you want it to start with 1, you need to output "(i + 1)".
I suppose ArrayClass was supposed to be groups (or vice versa)
Corrected code:
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>Here is an alternative version of the 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(""));