Code works on console, but when I call it in document does not work properly

Question

I have a code that works perfectly running on the console but doesn’t work when I call it by clicking on a document button.

Function of my code: Read a file .csv and separate words between semicolon and semicolon.

Return testing on console: All separate sentences in an array: product[0.15:"Reference", 0.16:"Modeling",...]

Return by clicking the button: Product[0,15:FINED, 0,16:FINED,...]

For test purposes, in the document . csv that I am going up contains this data (these 15 semicolons at the beginning is because the separation in the for starts at index 15):

;;;;;;;;;;;;;;;REFERENCE;MODELING;GRADE;grade1;grade2;grade3;grade4;grade5;grade6;grade7;grade8;grade9;grade10;WHOLESALE R$;RETAIL

My code:

function ImportarProdutos()
{

//Pega elemento <input>
var file = document.getElementById("DadosCsv");

///Variavel para ler arquivo (.csv)
var reader = new FileReader();
//Lê o arquivo
reader.readAsBinaryString(file.files[0]);

//adiciona o que foi lido em uma variavel
var produtos = reader.result;

var produto = [];

//Aqui apenas separa cada palavra
var pos =30;
var j = 15;

for( i = 0; i < 3; i++)
{

  for( ; j < pos; j++){
  

    produto[[i,j]] = produtos.split(";")[j];
    
  }
pos = pos+15;
 
}

console.log(produto);
}

     <input type="file" id="DadosCsv" />
     <button onclick="ImportarProdutos()">Importar Produtos</button>
   

Answer 1

The problem is that you are wanting to manipulate the contents of the file before it has been read due to it being an asynchronous process. On the console you can do it because you’ve had time to read the file.

Use the event onload to only handle the content after the file has been read:

function ImportarProdutos(){
   //Pega elemento <input>
   var file = document.getElementById("DadosCsv");
   ///Variavel para ler arquivo (.csv)
   var reader = new FileReader();
   //Lê o arquivo
   reader.readAsBinaryString(file.files[0]);
   reader.onload = function () {
      var produtos = reader.result;

      //adiciona o que foi lido em uma variavel
      var produto = [];

      //Aqui apenas separa cada palavra
      var pos =30;
      var j = 15;

      teste = produtos.split(";")

      for( i = 0; i < 3; i++){

         for( ; j < pos; j++){
            produto[[i,j]] = produtos.split(";")[j];
         }
         pos = pos+15;
      }

      console.log(produto);
   }
}