JavaScript Loop Sample For Discussion

August 2025

There's More Than One Way To Do It

Completing any specific programming task is rarely limited to a single approach. Take rending a table on a web page. There's a zillion ways to do it. This page has one of them¹.

The goal is to take data exported from an Excel document into a CSV format² and render it on a web page³.

Talking About It

I'm not really getting into the details of the code for this post. It's primary purpose is as a sample to discuss in person.

Show Me The Code (Version 1)

Here's the full set of code for making parsing the input data and rendering the table.

The "Output" section below the code shows the results.

HTML

<table>

  <thead>
    <tr>
      <th>Name</th>
      <th>HP</th>
      <th>Attack</th>
      <th>Defense</th>
      <th>Sp. Atk</th>
      <th>Sp. Def</th>
      <th>Speed</th>
    </tr>
  </thead>

  <tbody id="pokeDataV1"></tbody>

</table>


<script type="module">

let rawDataFromCSV = `Bulbasaur;45;49;49;65;65;45
Ivysaur;60;62;63;80;80;60
Venusaur;80;82;83;100;100;80`;

let rows = rawDataFromCSV.split("\n");

for (let row of rows) {

  let rowElement = 
    document.createElement("tr");

  let cells = row.split(";");

  for (let cellValue of cells) {

      let cellElement = 
        document.createElement("td");

      cellElement.innerHTML = cellValue;

      rowElement.appendChild(cellElement);

  }
  
  let tableElement = 
    document.querySelector("#pokeDataV1");

  tableElement.appendChild(rowElement);

}

</script>

Output

Name	HP	Attack	Defense	Sp. Atk	Sp. Def	Speed
Bulbasaur	45	49	49	65	65	45
Ivysaur	60	62	63	80	80	60
Venusaur	80	82	83	100	100	80

Adding Some Extras (Version 2)

This version of the code adds in some formatting. The HP column cells get a <strong></strong> tag wrapped around them to make them bold. The key is this line which provides a counter to keep track of which cell is being worked on.

let currentCell = 1;

It's placed outside this loop over the cells:

for (let cell of cellsData) {
  
  // Other code removed 
  // for clarity

}

The currentCell variable is then used inside the for loop to change the output of the HP cell to include the <strong></strong> tag in the loop.

HTML

<table>

  <thead>
    <tr>
      <th>Name</th>
      <th>HP</th>
      <th>Attack</th>
      <th>Defense</th>
      <th>Sp. Atk</th>
      <th>Sp. Def</th>
      <th>Speed</th>
    </tr>
  </thead>

  <tbody id="pokeDataV2"></tbody>

</table>


<script type="module">

let rawDataFromCSV = `Bulbasaur;45;49;49;65;65;45
Ivysaur;60;62;63;80;80;60
Venusaur;80;82;83;100;100;80`;

let rows = rawDataFromCSV.split("\n");

for (let row of rows) {

  let rowElement = 
    document.createElement("tr");

  let cellsData = row.split(";");

  let currentCell = 1;

  for (let cellValue of cellsData) {

    let cellElement = 
      document.createElement("td");

    if (currentCell === 2) {

      cellElement.innerHTML = 
        "<strong>" + cellValue + "</strong>";

    } else {

      cellElement.innerHTML = cellValue;

    }

    rowElement.appendChild(cellElement);

    currentCell = currentCell + 1;

  }
  
  let tableElement = 
    document.querySelector("#pokeDataV2");

  tableElement.appendChild(rowElement);

}

</script>

Output

Name	HP	Attack	Defense	Sp. Atk	Sp. Def	Speed
Bulbasaur	45	49	49	65	65	45
Ivysaur	60	62	63	80	80	60
Venusaur	80	82	83	100	100	80

A Little Style

This little snippet of code adds some styling to the table to make it take up the full width of the content column and add a color to the cells.

<style>

table  {
  width: 100%;
}

td {
  border: 1px solid goldenrod;
  text-align: center;
  padding-block: 0.1rem;
  padding-inline: 0.2rem;
}

</style>

There You Have It

That's it for the basics.

Of course, this doesn't get into how to update the data. That's a longer conversation for another post.

-a

end of line

Footnotes

1 ⤴

This code is designed to be as beginner friendly as possible. It can be read from top down and doesn't introduce explicit or inline functions.

In the second version, the index counter for the for loop is done as an external variable to keep the two for instances consistent.

It also uses the + for string concatination. That's easier to understand than strings with backtics and inline variables.

Another thing is using let everywhere when const is what I'd use with more experience. Again, limiting to the single approach reduces the overall mental overhead.

The code is also designed to be the only thing on the page. The style sheet works directly on the table and td elements to prevent having to introduce and explain classes.

Depending on the context and the amount of time folks have it's worth getting into those topics. Their out of scope for this post.

2 ⤴

The Excel to CSV export uses ; characters instead of commas.

Making a generalized CSV parser that can deal with the arbitrary CSV files is a complicated endeavour. It's best to use a pre-built library if that's your goal. The goal of this post is to show the entire process without external libraries.

Given that it's a single CSV file that resides with the code base doing the parsing this way works fine.

3 ⤴

This is all done with "Vanilla JavaScript". That is, no external libraries of frameworks. You can copy/paste this code into a .html file and it'll work without having to fuss with anything else.