【Javascript】CSVのデータを部分抽出

この記事では、JavascriptでCSVファイルを読み込んで一部のデータを取り出す方法をソースコード付きでまとめました。

データを部分抽出

Javascriptでは、Ajaxを使ってサーバー上にあるCSVファイルを読み込むことが出来ます。
今回は、読み込んだ時系列データのうち、特定の日付のデータだけを取り出しました。

ソースコード

サンプルプログラムのソースコードです。

// CSVを読み込んで配列に変換
var csvToArray = function(path) {
    var csvData = new Array();
    var data = new XMLHttpRequest();

    data.open("GET", path, false);
    data.send(null);

    var LF = String.fromCharCode(10);
    var lines = data.responseText.split(LF);

    for (var i = 0; i < lines.length; ++i) {
        var cells = lines[i].split(",");
        if( cells.length != 1 ) {
            csvData.push(cells);
        }
    }
    return csvData;
};

// 特定の日時のデータを抽出
var getDateData = function(date, src) {
    var dst = new Array();

    for(var i = 0; i < src.length; i++)
        if (src[i][0].indexOf(date) !== -1) {
            dst.push(src[i]);
        }
    }

    return dst;
};

// ページロード時に実行
window.onload = function(){
  var csvData = csvToArray("data.csv");
  var date = "2016-12-12";
  var data2 = getDateData(date, csvData);

  alert(data2);
};

読み込んだCSVファイル:data.csv

実行結果

サンプルプログラムの実行結果です。
サンプルデモページ
2016-12-12のデータのみを取り出してダイアログに表示しました。

- 関連記事
1 Chart.js入門 グラフ・チャート作成
2 Javascript入門

コメント