how can I create multiple unordered list from a two dimensional array-CodePudding

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 an example array

var groups = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
];

When running the code with this, it outputs

<div>
  <ul>
    <span>Groep1</span>
    <li>undefined</li>
  </ul>
</div>

While it should 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>

CodePudding user response：

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>

CodePudding user response：

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(""));