Two dimensional array is empty after assigning all of the elements (JavaScript)

Question

I'm trying to read a table in the form of a .csv file and put the data into a two-dimensional array. I managed to put the data into a one-dimensional array, but converting it into a two-dimensional one doesn't seem to work for me.

This is the code that I came up with. No errors are showing; however, when trying to print elements of the new two-dimensional array, they all seem empty.

const myForm = document.getElementById("myForm");
const csvFile = document.getElementById("csvFile");


myForm.addEventListener("submit", function() {

  const input = csvFile.files[0];
  const reader = new FileReader();


  reader.readAsText(input);
  reader.onload = function() {
    text = reader.result;

    var table1D = [];
    table1D = text.split(",");

    var table1DLength = table1D.length;
    var table2D = [];
    var numberOfColumns = 46;
    var numberOfRows = 32;

    for (var i = 0; i < numberOfRows; i++) {
      for (var j = 0; j < numberOfColumns; j++) {
        table2D[i] = [];
      }
    }



    for (var k = 0; k < table1DLength; k++) {
      for (var i = 0; i < numberOfRows; i++) {
        for (var j = 0; j < numberOfColumns; j++) {
          table2D[i][j] = table1D[k];
        }
      }
    }
    document.write(table2D[0][0]); // this doesn't print out anything, no matter which element

  };

  reader.onerror = function() {
    document.write("ERROR");
  };

});

<form id="myForm">
  <input type="file" id="csvFile" accept=".csv" />
  <br />
  <input type="submit" value="Submit" />

</form>

table2D[i] = []; maybe you should just use an object to do this? do you need to have a 2d array? — This Guy, Jan 12 '23 at 15:26
You forgot to prevent form submission. See [How to prevent form from being submitted?](/q/3350247/4642212). — Sebastian Simon, Jan 12 '23 at 15:30

mplungjan · Answer 1 · 2023-01-12T16:06:34.137

There are many things not ok. Here is a fixed version using ES6 in a predictable manner

I add the event handlers before I execute the thing that will trigger them
I loop using nested maps
I loop over number of lines and number of entries instead of hardcoding them

The code below might need more code if you have strings with commas in them

const myForm = document.getElementById("myForm");
const csvFile = document.getElementById("csvFile");
const pre = document.getElementById('pre');
window.addEventListener('DOMContentLoaded', () => {
  myForm.addEventListener("submit", e => {
    e.preventDefault();
    const input = csvFile.files[0];
    const reader = new FileReader();
    reader.addEventListener('error', function() {
      pre.textContent = "ERROR";
    });
    reader.addEventListener('load', function() {
      const text = reader.result;
      const arr = text.split(/\r?\n/)
        .map(line => line.split(","));
        console.log(arr)
      pre.textContent = arr.join('\n')
    });
    reader.readAsText(input);
  });
});

<form id="myForm">
  <input type="file" id="csvFile" accept=".csv" />
  <br />
  <input type="submit" value="Submit" />

</form>
<pre id="pre"></pre>

Thank you for the response, the code seems to work well, and the array is displayed in the console. If I were to use the array in further calculations, should I do it inside the 'load' event as I did before? — K_Grabska, Jan 12 '23 at 16:43

Two dimensional array is empty after assigning all of the elements (JavaScript)

1 Answers1