webentwicklung-frage-antwort-db.com.de

Javascript lädt CSV-Datei in ein Array

Ich entwickle eine Webseite in Wordpress. Die Webseite muss eine Combobox mit allen Ländern haben. Ich habe ein Dataset im csv-Format, das einige 10.000 Zeilen für all diese Länder hat .. Wenn der Benutzer einen Landkreis in der Dropdown-Liste auswählt, möchte ich nur die ausgewählten Landkreisdaten auf der Webseite anzeigen. Das ist meine Anforderung.

In WordPress füge ich mit meiner Webseite die JS-Datei hinzu 

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

und der Code für das Webseiten-Dropdown ist 

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

In der Datei countyList1.js habe ich die Funktionen setCounties () und getSelectedCountyData ().

Bisher kann ich die Dropdown-Liste mit Countys-Liste sehen. Ich kann nicht die CSV-Datei lesen und den ausgewählten Landkreisfilter auf diese Liste anwenden.

Ich habe das FileReader-Objekt ausprobiert und kann die CSV-Inhalte auf der Webseite laden. Ich möchte jedoch nicht, dass der Benutzer die CSV-Datei auswählt. Ich habe den Datensatz bereits .

Ich versuche, diese jquery.csv-0.71-Bibliothek aus diesem SO post How to read Daten aus der * .CSV-Datei mit Javascript zu verwenden. aber ich brauche Hilfe.

Hier ist der Code, der aufgerufen wird, wenn ein Landkreis ausgewählt wird

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);
}
8
Aqua267

Ich empfehle dringend, in dieses Plugin zu schauen:

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

Ich habe dies für ein Projekt verwendet, das große CSV-Dateien verarbeitet, und das Parsen einer CSV in ein Array ist ziemlich gut. Sie können dies verwenden, um eine lokale Datei aufzurufen, die Sie in Ihrem Code angeben, sodass Sie nicht von einem Dateiupload abhängig sind. 

Nachdem Sie das Plugin oben eingefügt haben, können Sie CSV im Wesentlichen folgendermaßen analysieren: 

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

Alles wird dann im Array data gespeichert, damit Sie es nach Belieben bearbeiten können. Ich kann weitere Beispiele für den Umgang mit den Array-Daten bereitstellen, wenn Sie dies benötigen.

Es gibt viele tolle Beispiele auf der Plugin-Seite, die auch eine Reihe von Dingen ausführen.

20
princessjackie

Wenn Sie sich nicht allzu große Sorgen über die Größe der Datei machen, ist es möglicherweise einfacher, die Daten als JS-Objekt in einer anderen Datei zu speichern und in Ihre Datei zu importieren. Entweder synchron oder asynchron mit der Syntax <script src="countries.js" async></script>. Spart, dass Sie die Datei importieren und analysieren müssen. 

Ich kann jedoch sehen, warum Sie nicht 10000 Einträge neu schreiben möchten. Hier ist ein grundlegender objektorientierter CSV-Parser, den ich geschrieben habe.

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();
};

Was kann so verwendet werden;

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

Der erste Parameter ist die Datei, relativ zur Position Ihrer HTML-Datei in diesem Fall .. .. Der zweite Parameter ist eine optionale Rückruffunktion, die ausgeführt wird, wenn die Datei vollständig geladen wurde.

Wenn Ihre Datei nicht-trennende Kommas enthält, wird dies nicht weitergehen, da sie nur 2d-Arrays erstellt, indem Sie Rückgaben und Kommas abhacken. Wenn Sie diese Funktion benötigen, sollten Sie sich Regex anschauen.

//THIS works 

"1234","ABCD" \n
"[email protected]£$" \n

//Gives you 
[
 [
  1234,
  'ABCD'
 ],
 [
  '[email protected]£$'
 ]
]

//This DOESN'T!

"12,34","AB,CD" \n
"[email protected],£$" \n

//Gives you

[
 [
  '"12',
  '34"',
  '"AB',
  'CD'
 ]
 [
  '"[email protected]',
  '£$'
 ]
]

Wenn Sie nicht an die OO -Methoden gewöhnt sind; Sie erstellen ein neues Objekt (wie eine Zahl, einen String, ein Array) mit ihren eigenen lokalen Funktionen und Variablen über eine 'Konstruktor'-Funktion. In bestimmten Situationen sehr praktisch. Diese Funktion kann verwendet werden, um 10 verschiedene Dateien mit unterschiedlichen Rückrufen gleichzeitig zu laden (abhängig von Ihrem Level der csv-Liebe!).

3
nepeo

Sie können AJAX nicht zum Abrufen von Dateien vom Benutzercomputer verwenden. Das ist absolut der falsche Weg.

Verwenden Sie die 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);

Dann content als CSV analysieren. Beachten Sie, dass Ihr Parser derzeit nicht mit Escape-Werten in CSV arbeitet, wie zum Beispiel: value1,value2,"value 3","value ""4"""

2
Halcyon

Dies ist, was ich verwendet habe, um eine CSV-Datei in einem Array zu verwenden. Konnte die obigen Antworten nicht zum Laufen bringen, aber das hat für mich funktioniert.

$(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);
}

Verwendete das jQuery-CSV-Plug-In, das oben verlinkt ist.

0
ColbyCo

Der ursprüngliche Code funktioniert einwandfrei zum Lesen und Trennen der CSV-Dateidaten, Sie müssen jedoch den Datentyp von CSV in Text ändern.

0
Shaun Woodburn