JqueryでロードしたCSVファイルをParseする方法

CSVファイルをJavascriptでロードする

JavaScriptでCSVファイルを扱うには、CSVフォーマットで書かれたテキストファイルを読み込んでからデータを解析（Parse）する必要があります。

解析には「jqeury.csv」ライブラリを使うと簡単に配列やJSONなどに変換することができるのですが、環境などによって使うことができない事もあるので、「jquery.csv」を使った方法と、使わない方法をご紹介したいと思います。

Jquery＋Jquery.csv

準備（ライブラリのインポート）

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/1.0.11/jquery.csv.min.js"></script>

事前に必要なライブラリをインポートします。
※「Jquery」→「Jquery.csv」の順に記述します
※「Jquery.csv」を使わない場合は2行目は不要です

ソースコード例（jquery.csv使用）

$.ajax({
  url: 'https://www.kuripapa.com/wp/wp-content/uploads/2021/02/PowerUsage.csv'
}).done(function(data, textStatus, jqXHR){
  var csv = $.csv.toArrays(data);
  console.log(csv);
}).fail(function(jqXHR, textStatus, errorThrown){
  console.log(errorThrown);
});

ソースコード例（jquery.csv未使用）

$.ajax({
  url: 'https://www.kuripapa.com/wp/wp-content/uploads/2021/02/PowerUsage.csv'
}).done(function(data, textStatus, jqXHR){
  var csv = [];
  $.each(data.split(/\r\n|\r|\n/), function(i, val){
    csv.push(val.split(/,/));
  });
  console.log(csv);
}).fail(function(jqXHR, textStatus, errorThrown){
  console.log(errorThrown);
});

解説

CSVファイルのロードには共に$.ajax()を使用しています。
$.ajax()で指定したURL先に通信を行い、ファイルデータ（data）を取得しています。
※取得データはCSVフォーマットの文字列データとなっています。

次に取得データを扱いやすい形に変換するのですが、今回は配列（Arrays）にしています。

Jquery.csvを使う場合
1. 取得したdataを$.csv.toArrays(data)に渡すと、Arrays(配列)に変換して返却してくれます
Jquery.csvを使わない場合
1. 最初に変換後の変数として空の配列を用意します
2. 次に取得したdataを1行毎に分割するため、data.split(/\r\n|\r|\n/)を行い、$.each()にて1行毎に処理を繰り返します
  ※/\r\n|\r|\n/は正規表現で複数ある改行コードを指定しています
3. 1行分の文字列データはval.split(/,/)を行い”,”（カンマ）を区切り文字指定して分割します
4. カンマ区切りで分割したデータを最初に用意した配列に追加しています

str.split(/,/)でCSVフォーマットを分割する例では、空白文字や”(ダブルクォーテーション）などを含んだまま配列の値となります。必要に応じて空白文字の除去などが必要となります。

最後に例では変換した配列をconsole.log(csv)で出力していますが、Tableに出力てみたり、出力用APIなどに使うなど、自由に利用することが出来ます。

利用例としてTable出力するコードも紹介しておきます。

//呼び出し
makeTable(csv, $('#campus'));

//関数定義
function makeTable(arys, ele){
  $(ele).empty();
  var table = $('<table>');
  $.each(arys, function(i, vals){
    var tr = $('<tr>');
    $.each(vals, function(j, val){
      tr.append($('<td>').text(val));
    });
    table.append(tr);
  });
  $(ele).append(table);
}

Jquery.csvでは今回紹介した$.csv.toArrays(csv)の他に、Object型（$.csv.toObjects(csv)）へ変換することもできます。また逆に配列やObjectをCSVフォーマットの文字列に変換するこもできる大変便利なライブラリとなっています。（$.csv.fromArrays(arrays)や$.csv.fromObjects(objects)）