CSV to array - Problème jquery et ajax

Question

J'essaie d'implémenter une fonction qui chargerait un fichier CSV stocké par le serveur et l'analyserait dans un tableau. J'ai quelques problèmes avec cela et je serais reconnaissant de l'aide.

Voilà comment la fonction ressemble à l'heure actuelle:

function getSeries(filename){ 
    //create an array where objects will be stored. 
    var seriesInFile=[]; 
    $.get('/public/csv/'+filename+'.csv', 
     function(data) { 
      // Split the lines 
      var lines = data.split('\n'); 
      $.each(lines, function(lineNo, line) { 
       var items = line.split(','); 
       //elements from each line are taken and stored 
       series = { 
          //some other attributes here, I took them off for this example 
          data: [] 
         } 
       $.each(items, function(itemNo, item) { 
         series.data.push(parseFloat(item)); 
       }); 
       seriesInFile.push(series); 
      }); 
     console.log(seriesInFile); //it works here! 
     }); 
    return seriesInFile; 
    }; 
    console.log(getSeries('hr')); 
    console.log(getSeries('hr')); 

Ainsi, le problème est que même si j'obtenir avec succès des informations à partir du fichier CSV et le stocker dans les « seriesInFile » dans la fonction .each $ , dès que j'en sors, ça ne marche plus - toute la fonction retourne un tableau vide. Je suppose que cela pourrait avoir quelque chose à voir avec la fonction get() qui est déployée un peu plus tard que la version originale de getSeries. Y a-t-il une solution simple pour cela?

Merci,

Answer 1

Je pense que vous devez retourner seriesInFile de la fonction de rappel de .get

function getSeries(filename){ 
    //create an array where objects will be stored. 
    var seriesInFile=[]; 
    $.get('/public/csv/'+filename+'.csv', 
     function(data) { 
      // Split the lines 
      var lines = data.split('\n'); 
      $.each(lines, function(lineNo, line) { 
       var items = line.split(','); 
       //elements from each line are taken and stored 
       series = { 
          //some other attributes here, I took them off for this example 
          data: [] 
         } 
       $.each(items, function(itemNo, item) { 
         series.data.push(parseFloat(item)); 
       }); 
       seriesInFile.push(series); 
      }); 
     console.log(seriesInFile); //it works here! 
     // do what you need to do with seriesInfile here 
     //like calling a function to display it 

     }); 
     //here seriesInFile is an empty array; 
    }; 

$ Depuis $ .get fait un appel asynchrone au serveur, tout l'autre code est exécuté: Dans votre exemple, vous renvoyez seriesInFile sous la forme d'un tableau vide car votre fonction n'attend pas que l'appel AJAX soit terminé et retourne simplement seriesInFile comme vous l'avez déclaré. Si vous voulez le retourner, vous devez le faire dans la fonction de rappel de $ .GET qui est exécutée en cas de succès de l'appel AJAX.

EDIT - Comme suggéré dans le commentaire retournant du rappel ne fonctionne probablement pas (jamais essayé). Habituellement, vous devriez faire ce que vous devez faire directement depuis la fonction de rappel (c'est ce que je fais habituellement). Si vous avez besoin d'aide pour quelque chose en particulier, je peux vous aider

Answer 2

Comme Nicola Peluchetti l'a souligné à juste titre, la requête GET est asynchrone. Cela signifie qu'il commence lorsque vous avez appelé $.get mais si cela se termine plus tard. La fonction getSeries retourne immédiatement. À ce stade, le tableau est toujours vide car la requête GET n'est pas terminée. Quoi que vous vouliez faire avec les données CSV analysées, vous devez l'initialiser à partir du rappel de la requête GET et non à partir de la fonction qui a appelé getSeries (mieux appelée startSeriesRetrieval).

Il pourrait ressembler à ceci (displaySeries est appelé à travailler davantage avec les données récupérées):

function startSeriesRetrieval(filename) { 
    $.get('/public/csv/'+filename+'.csv', 
    function(data) { 
     // Split the lines 
     var lines = data.split('\n'); 
     var seriesInFile=[]; 
     $.each(lines, function(lineNo, line) { 
     var items = line.split(','); 
     //elements from each line are taken and stored 
     series = { 
      //some other attributes here, I took them off for this example 
      data: [] 
     } 
     $.each(items, function(itemNo, item) { 
      series.data.push(parseFloat(item)); 
     }); 
     seriesInFile.push(series); 
     }); 
     displaySeries(seriesInFile); 
    } 
); 
};