web-dev-qa-db-fra.com

Javascript chargeant le fichier CSV dans un tableau

Je développe une page Web dans Wordpress. La page Web doit avoir une liste déroulante avec tous les comtés. J'ai un ensemble de données au format csv qui contient environ 10k lignes pour tous ces comtés . Lorsque l'utilisateur sélectionne un comté dans la liste déroulante, je ne souhaite afficher que les données de comté sélectionnées dans la page Web. Ceci est mon exigence.

Dans wordpress, ma page Web, j’ajoute le fichier js en utilisant 

<script type="text/javascript" src="http://xxx/wp     content/uploads/2014/05/countyList1.js"></script>

et le code pour la page Web déroulante est 

<select name="county" id="county" onload="setCounties();" onchange="getSelectedCountyData();"></select>

Dans le fichier countyList1.js, j'ai les fonctions setCounties () et getSelectedCountyData ().

Jusqu'à présent, je peux voir la liste déroulante avec les comtés. Je ne sais pas comment lire le fichier CSV et appliquer le filtre de comté sélectionné à cette liste.

J'ai essayé l'objet FileReader et je peux charger le contenu du fichier CSV sur la page Web, mais je ne souhaite pas que l'utilisateur sélectionne le fichier CSV. J'ai déjà le jeu de données .

J'essaie d'utiliser cette bibliothèque jquery.csv-0.71 à partir de cet article SO Comment lire des données à partir d'un fichier * .CSV à l'aide de javascript? mais j'ai besoin d'aide.

Voici le code qui est appelé quand un comté est sélectionné

function getSelectedCountyData() {
        cntrySel = document.getElementById('county');
        //selCty = countyList[cntrySel.value];
        handleFiles();
}

function handleFiles() {

    $(document).ready(function () {
        $.ajax({
            type: "GET",
            url: "D:\Docs\Desktop\csvfile.csv",
            dataType: "csv",
            success: function (data) { processData(data); }
        });
    });
}

function processData(allText) {
    var allTextLines = allText.split(/\r\n|\n/);
    var headers = allTextLines[0].split(',');
    var lines = [];

    for (var i = 1; i < allTextLines.length; i++) {
        var data = allTextLines[i].split(',');
        if (data.length == headers.length) {

            var tarr = [];
            for (var j = 0; j < headers.length; j++) {
                tarr.Push(headers[j] + ":" + data[j]);
            }
            lines.Push(tarr);
        }
    }
    console.log(lines);
    drawOutput(lines);
}

function drawOutput(lines) {
    //Clear previous data
    document.getElementById("output").innerHTML = "";
    var table = document.createElement("table");
    for (var i = 0; i < lines.length; i++) {
        var row = table.insertRow(-1);
        for (var j = 0; j < lines[i].length; j++) {
            var firstNameCell = row.insertCell(-1);
            firstNameCell.appendChild(document.createTextNode(lines[i][j]));
        }
    }
    document.getElementById("output").appendChild(table);
}
javascriptjquerywordpressfile
8
Aqua267

Je recommande fortement de regarder dans ce plugin:

http://github.com/evanplaice/jquery-csv/

Je l'ai utilisé pour un projet manipulant de gros fichiers CSV et il gère très bien l'analyse d'un fichier CSV dans un tableau. Vous pouvez également utiliser cette option pour appeler un fichier local spécifié dans votre code afin que vous ne dépendiez pas d'un téléchargement de fichier. 

Une fois que vous avez inclus le plugin ci-dessus, vous pouvez essentiellement analyser le fichier CSV à l'aide des éléments suivants: 

$.ajax({
    url: "pathto/filename.csv",
    async: false,
    success: function (csvd) {
        data = $.csv.toArrays(csvd);
    },
    dataType: "text",
    complete: function () {
        // call a function on complete 
    }
});

Tout vivra alors dans le tableau data que vous pourrez manipuler selon vos besoins. Je peux fournir d’autres exemples pour traiter les données du tableau si vous en avez besoin.

Il y a beaucoup d'excellents exemples disponibles sur la page du plugin pour faire une variété de choses, aussi.

20
princessjackie

Si vous ne vous inquiétez pas excessivement de la taille du fichier, il vous sera peut-être plus facile de stocker les données en tant qu’objet JS dans un autre fichier et de les importer dans votre. De manière synchrone ou asynchrone, en utilisant la syntaxe <script src="countries.js" async></script>. Enregistre sur vous avez besoin d'importer le fichier et de l'analyser. 

Cependant, je peux voir pourquoi vous ne voudriez pas réécrire 10000 entrées, voici donc un analyseur csv de base orienté objet que j’ai écrit.

function requestCSV(f,c){return new CSVAJAX(f,c);};
function CSVAJAX(filepath,callback)
{
    this.request = new XMLHttpRequest();
    this.request.timeout = 10000;
    this.request.open("GET", filepath, true);
    this.request.parent = this;
    this.callback = callback;
    this.request.onload = function() 
    {
        var d = this.response.split('\n'); /*1st separator*/
        var i = d.length;
        while(i--)
        {
            if(d[i] !== "")
                d[i] = d[i].split(','); /*2nd separator*/
            else
                d.splice(i,1);
        }
        this.parent.response = d;
        if(typeof this.parent.callback !== "undefined")
            this.parent.callback(d);
    };
    this.request.send();
};

Qui peut être utilisé comme ça;

var foo = requestCSV("csvfile.csv",drawlines(lines));

Le premier paramètre est le fichier, par rapport à la position de votre fichier html dans ce cas . Le deuxième paramètre est une fonction de rappel facultative exécutée lorsque le fichier a été complètement chargé.

Si votre fichier contient des virgules ne séparant pas, il ne passera pas à cela, car il crée simplement des tableaux 2D en coupant les retours et les virgules. Vous voudrez peut-être examiner regexp si vous avez besoin de cette fonctionnalité.

//THIS works 

"1234","ABCD" \n
"!@£$" \n

//Gives you 
[
 [
  1234,
  'ABCD'
 ],
 [
  '!@£$'
 ]
]

//This DOESN'T!

"12,34","AB,CD" \n
"!@,£$" \n

//Gives you

[
 [
  '"12',
  '34"',
  '"AB',
  'CD'
 ]
 [
  '"!@',
  '£$'
 ]
]

Si vous n'êtes pas habitué aux méthodes OO; ils créent un nouvel objet (tel qu'un nombre, une chaîne de caractères, un tableau) avec leurs propres fonctions et variables locales via une fonction 'constructeur'. Très pratique dans certaines situations. Cette fonction peut être utilisée pour charger 10 fichiers différents avec des rappels différents en même temps (en fonction de votre niveau d’amour csv!)

3
nepeo

Vous ne pouvez pas utiliser AJAX pour extraire des fichiers de la machine utilisateur. C'est absolument la mauvaise façon de s'y prendre.

Utilisez le FileReader API:

<input type="file" id="file input">

js:

console.log(document.getElementById("file input").files); // list of File objects

var file = document.getElementById("file input").files[0];
var reader = new FileReader();
content = reader.readAsText(file);
console.log(content);

Ensuite, analysez content en tant que CSV. Gardez à l'esprit que votre analyseur ne traite pas actuellement les valeurs échappées dans CSV telles que: value1,value2,"value 3","value ""4"""

2
Halcyon

C'est ce que j'avais l'habitude d'utiliser un fichier csv dans un tableau. Impossible d'obtenir les réponses ci-dessus au travail, mais cela a fonctionné pour moi.

$(document).ready(function() {
   "use strict";
    $.ajax({
        type: "GET",
        url: "../files/icd10List.csv",
        dataType: "text",
        success: function(data) {processData(data);}
     });
});

function processData(icd10Codes) {
    "use strict";
    var input = $.csv.toArrays(icd10Codes);
    $("#test").append(input);
}

Utilisez le plug-in jQuery-CSV lié ci-dessus.

0
ColbyCo