0

Estou tentando fazer um código que leia os dados de um arquivo excel e escreva-os no console. Para isso estou usando o SheetJS mas estou tendo um problema. Toda vez o meu código retorna "Undefined" no meu console, a menos que eu coloque o console.log dentro do onreadystatechange, mas de forma alguma esta arrow function me retorna os dados do arquivo xlsx. Oque estou errando?

var pega_dados_excel = () => {
    var softwares_instalados;

    var url = "test.xlsx"; // Inserir o nome do Arquivo excel(xls ou xlsx)

    var req = new XMLHttpRequest(); // Inicia a requisição
    req.open("GET", url, true);
    req.responseType = "arraybuffer";
    
    req.onreadystatechange = function(){
        var data = new Uint8Array(req.response);
        var workbook = XLSX.read(data, { type: "array" });
        var first_sheet_name = workbook.SheetNames[0];
        var worksheet = workbook.Sheets[first_sheet_name];
        
        softwares_instalados = (XLSX.utils.sheet_to_json(worksheet));
    }

    req.send();

    return softwares_instalados;
}

$(document).ready(function () {
    console.log(pega_dados_excel());
});

EDIT1: Depois da alteração feita, sugerida pelo Cmte Cardeal o console ficou da seguinte forma:

inserir a descrição da imagem aqui

1 Resposta 1

0

Creio que o problema seja porque o onreadystatechange é assíncrono, ou seja, seu código vai executar de cima pra baixo de forma sincrona, enquanto o onreadystatechange vai levar um tempo pra ser chamado, logo o seu softwares_instalados vai ser undefined sempre, porque antes de o onreadystatechange ser chamado, a funcao ja deu o retorno de softwares_intalados.

Minha dica seria, talvez, trabalhar com uma funcao de callbackpassada por parâmetro para a sua função pega_dados_excel (var pega_dados_excel = (callback) => {...}), que será executada quando a operação assíncrona terminar. Quando essa função de callback for executada, vamos passar os resultados como parâmetro para ela. Neste caso chamei de softwares e vamos passar o resultado (softwares_instalados) para ela.

Vou mostrar um código que talvez possa funcionar. SE FUNCIONAR, comente minha resposta pra que eu lhe explique, mas acho que o código fala por si só:

var pega_dados_excel = (callback) => {
  var softwares_instalados;

  var url = "test.xlsx"; // Inserir o nome do Arquivo excel(xls ou xlsx)

  var req = new XMLHttpRequest(); // Inicia a requisição
  req.open("GET", url, true);
  req.responseType = "arraybuffer";
  
  req.onreadystatechange = function(){
      var data = new Uint8Array(req.response);
      var workbook = XLSX.read(data, { type: "array" });
      var first_sheet_name = workbook.SheetNames[0];
      var worksheet = workbook.Sheets[first_sheet_name];
      
      softwares_instalados = (XLSX.utils.sheet_to_json(worksheet));

      // quando tivermos uma resposta, executamos a funcao de callback.
      callback(softwares_instalados) 
  }

  req.send();
}

$(document).ready(function () {
  // dentro de 'pega_dados_excel', vamos executar nossa funcao de callback
  // repare que 'softwares' é o parametro que passamos para 
  // 'callback(softwares_instalados)'

  pega_dados_excel((softwares) => {
    console.log(softwares) // quando tivermos o retorno, damos um console.log()
  });
});

Tente fazer os teste desse script que coloquei. Se funcionar eu posso explicar, se não, eu apago minha resposta e penso um pouco mais na solução. Espero ter ajudado.

5
  • Muito obrigado, entendi como vc fez e funcionou no meu teste, porém está sendo retornado 3 console.log, sendo dois vazios e o ultimo corretamente, sabe me dizer o porque ? Vou deixar um print na pergunta Commented 17/10/2020 às 20:43
  • como esta seu codigo? posso dar uma olhada. Commented 17/10/2020 às 20:49
  • Atualizei o código na pergunta Commented 17/10/2020 às 20:51
  • ah sim, a explicacao e por causa do readyState do documento, creio eu. como mostra a documentacao da mozilla, "Retorna "loading" enquanto document está carregando, "interactive" quando foi carregado porém seus sub-recursos (como imagens, por exemplo) ainda não, e "complete" quando foi totalmente carregado.", entao sao 3 etapas diferentes, e por isso os 3 console.log(). Se foi respondida sua duvida, retorne o codigo da sua pergunta para como estava inicialmente e um voto se minha resposta foi util :D Commented 17/10/2020 às 21:01
  • 1
    Faz sentido... coloquei um if dentro do onreadystatechange para verificar se já está OK e funcionou perfeitamente. o if ficou assim: if (this.readyState == 4 && this.status == 200). Muito obrigado pela ajuda :) Commented 17/10/2020 às 21:06

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .