web-dev-qa-db-fra.com

Lire dans un fichier csv local en javascript?

[EDIT] J'ai résolu le problème en utilisant D3, ça ne fait rien merci! 

J'ai donc un fichier csv qui ressemble à quelque chose comme ça, et je dois importer un fichier csv local dans le javascript de mon client: 

    "L.Name", "F.Name", "Gender", "School Type", "Subjects"
    "Doe",    "John",  "M",      "University",  "Chem I, statistics, English, Anatomy"
    "Tan",    "Betty",   "F",     "High School", "Algebra I, chem I, English 101"
    "Han",    "Anna",    "F",     "University",  "PHY 3, Calc 2, anatomy I, spanish 101"
    "Hawk",   "Alan",    "M",     "University",  "English 101, chem I"

J'ai finalement besoin de l'analyser et de produire quelque chose comme:

Chem I: 3         (number of people taking each subject)
Spanish 101: 1 
Philosophy 204: 0

Mais pour l'instant, je ne peux que l'importer en javascript. 

Mon code actuel ressemble à ceci: 

<!DOCTYPE html>  
<html>  
<body>
<h1>Title!</h1>
<p>Please enter the subject(s) that you wish to search for:</p>
<input id="numb" type="text"/> 
<button onclick="myFunction()">Click me to see! :) </button>
<script>
function myFunction() {
    var splitResearchArea = []; 
    var textInput = document.getElementById('numb').value; 
    var splitTextInput = textInput.split(",");

  for(var i =0; i<splitTextInput.length; i++) {
    var spltResearchArea = splitTextInput[i];
    splitResearchArea.Push(spltResearchArea);
  }
}

J'ai fait des recherches et trouvé des liens utiles sur Stackoverflow tels que this , this et this mais je suis un novice en javascript et je ne le comprends pas complètement. Devrais-je utiliser Ajax? FileReader? jQuery? Quels sont les avantages d'utiliser l'un par rapport à l'autre? Et comment implémenteriez-vous cela dans le code? 

Mais oui, je suis un peu confus depuis que je suis très novice en javascript, alors toute aide dans la bonne direction serait géniale. Je vous remercie!! 

javascriptjqueryajaxcsvfilereader
8
ocean800

Voici comment utiliser readAsBinaryString() à partir de FileReader API pour charger un fichier local.

<p>Select local CSV File:</p>
<input id="csv" type="file">

<output id="out">
    file contents will appear here
</output>

Fondamentalement, il suffit d'écouter l'événement de changement dans <input type="file"> et d'appeler la fonction readFile.

var fileInput = document.getElementById("csv"),

    readFile = function () {
        var reader = new FileReader();
        reader.onload = function () {
            document.getElementById('out').innerHTML = reader.result;
        };
        // start reading the file. When it is done, calls the onload event defined above.
        reader.readAsBinaryString(fileInput.files[0]);
    };

fileInput.addEventListener('change', readFile);

jsFiddle

27
Jose Rui Santos

j'utilise cette bibliothèque à partir de Google: https://github.com/evanplaice/jquery-csv/ Tout d'abord, il faut 

$.get(ur_csv_file_path);

puis utilisez le guide de la page

2
Legendary

Il y a autant de façons d'accomplir ce que vous voulez que vous pouvez imaginer.

Si je le faisais, je pourrais commencer par scinder le texte saisi en lignes comme ceci:

var lines = inputText.split('\n');

Ensuite, je voudrais extraire les noms des en-têtes de la première ligne . Vous avez besoin d'une fonction pour lire les valeurs de chaque ligne.

// This assumes no commas in the values names.
function getCsvValuesFromLine(line) {
    var values = lines[0].split(',');
    value = values.map(function(value){
        return value.replace(/\"/g, '');
    });
    return values;
}

var headers = getCsvValuesFromLine(lines[0]);

Ensuite, je bouclerais sur les lignes restantes et créerais un tableau d'objets représentant les valeurs dans les lignes.

lines.shift(); // remove header line from array
var people = lines.map(function(line) {
    var person = {},
        lineValues = getCsvValuesFromLine(line);
    for(var i = 0; i < lines.length; i += 1) {
        person[headers[i]] = lineValues[i];
    }
    return person;
});

Si tout cela fonctionne, vous devriez vous retrouver avec un tableau d'objets représentant les valeurs de chaque ligne de votre CSV.

Ce qui précède est un aperçu de ce à quoi le code pourrait ressembler. Je ne l’ai pas testé et il n’est certainement pas prêt pour la production, mais j’espère que cela vous donnera une idée de la façon dont vous allez faire ce que vous voulez.

J'ai utilisé plusieurs fonctions Javascript intégrées. Je suggère de les consulter sur MDN si vous ne les connaissez pas; ils sont bons à savoir.

Enfin, il y a une bizarrerie bizarre en Javascript avec son insertion automatique de point-virgule (une mauvaise fonctionnalité du langage, IMO). Afin d'éviter tout problème, ne mettez pas de nouvelle ligne avant un support d'ouverture.

Toujours écrire

XXXX {
    ....
}

et n'écris pas

XXXX
{
    ....
}
1
Daniel Allen Langdon