web-dev-qa-db-ja.com

CSVファイルを配列に読み込むJavaScript

WordpressでWebページを開発しています。 Webページには、すべての郡を含むコンボボックスが必要です。これらのすべての郡に約1万行あるcsv形式のデータセットがあります。ユーザーがドロップダウンで郡を選択すると、選択した郡のデータのみがWebページに表示されます。これが私の要件です。

ワードプレスでは、私のWebページを使用してjsファイルを追加しています

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

そして、ウェブページのドロップダウンのコードは

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

CountyList1.jsファイルには、setCounties（）およびgetSelectedCountyData（）関数があります。

これまでのところ、郡リストでドロップダウンを見ることができます。 CSVファイルを読み取って、選択した郡フィルターをこのリストに適用する方法がわかりません。

FileReaderオブジェクトを試し、CSVコンテンツをWebページにロードできますが、ユーザーにCSVを選択させたくありません。データセットは既に持っています。

私はこのSO post javascriptを使用して* .CSVファイルからデータを読み取る方法 =からのこのjquery.csv-0.71ライブラリを使用しようとしていますが、助けが必要です。

郡が選択されたときに呼び出されるコードは次のとおりです

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

このプラグインを調べることを強くお勧めします。

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

大規模なCSVファイルを処理するプロジェクトでこれを使用し、CSVを配列に非常にうまく処理します。これを使用して、コードで指定したローカルファイルを呼び出すこともできるため、ファイルのアップロードに依存しません。

上記のプラグインを含めると、基本的に次を使用してCSVを解析できます。

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

必要に応じて操作できるように、すべてが配列dataに格納されます。必要に応じて、配列データを処理する別の例を提供できます。

プラグインページには、さまざまなことを行うためのすばらしい例がたくさんあります。

22
princessjackie

ファイルのサイズを過度に心配していない場合は、データをJSオブジェクトとして別のファイルに保存し、それをにインポートする方が簡単かもしれません。シンタックス<script src="countries.js" async></script>を使用して、同期的または非同期的に。ファイルをインポートして解析する必要がある場合に保存します。

ただし、10000エントリを書き換えたくない理由がわかるので、ここに私が書いた基本的なオブジェクト指向のcsvパーサーを示します。

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

これは次のように使用できます。

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

最初のパラメーターは、この場合のhtmlファイルの位置に相対的なファイルです。 2番目のパラメーターは、ファイルが完全にロードされたときに実行されるオプションのコールバック関数です。

ファイルに非分離のコンマがある場合、戻り値とコンマで切り刻んで2D配列を作成するだけなので、これはうまくいきません。その機能が必要な場合は、正規表現を調べてください。

//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'
 ]
 [
  '"!@',
  '£$'
 ]
]

OOメソッドに慣れていない場合、 'constructor'関数を介して独自のローカル関数と変数を使用して新しいオブジェクト（数値、文字列、配列など）を作成します。この関数を使用して、異なるコールバックを持つ10の異なるファイルをすべて同時にロードできます（csvの愛のレベルに応じて！）

3
nepeo

AJAXを使用してユーザーマシンからファイルを取得することはできません。これは絶対に間違った方法です。

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

次に、contentをCSVとして解析します。パーサーは現在、CSVで次のようなエスケープされた値を処理していないことに注意してください：value1,value2,"value 3","value ""4"""

2
Halcyon

これはcsvファイルを使用して配列に使用したものです。上記の答えを得ることができませんでしたが、これはうまくいきました。

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

上記リンクのjQuery-CSVプラグインを使用しました。

0
ColbyCo

元のコードはcsvファイルデータの読み取りと分離には正常に機能しますが、データ型をcsvからテキストに変更する必要があります。

0
Shaun Woodburn