2014/08/26

【JavaScript】読み込んだCSVファイルを配列に変換する方法【Ajax】

【JavaScript】読み込んだCSVファイルを配列に変換する方法【Ajax】

Ajaxなどを利用して取得したCSV形式のデータを配列に変換して扱いやすくする方法を紹介します.

目次

CSVファイルとは

CSVファイルは,項目をカンマで区切り,データを表したテキストファイルのことです.

複数の項目をレコードとして扱う場合には,行末の改行コードで区切ることで,ひとつのレコードを表します.

配列への変換

まずは,ソースコードを紹介します.

function getCSVFile() {
    var xhr = new XMLHttpRequest();
    xhr.onload = function() {
	createArray(xhr.responseText);
    };

    xhr.open("get", "csv_test_file.csv", true);
    xhr.send(null);
}
getCSVFile();

function createXMLHttpRequest() {
    var XMLhttpObject = null;
    XMLhttpObject = new XMLHttpRequest();
    return XMLhttpObject;
}

function createArray(csvData) {
    var tempArray = csvData.split("\n");
    var csvArray = new Array();
    for(var i = 0; i<tempArray.length;i++){
	csvArray[i] = tempArray[i].split(",");
    }
    console.log(csvArray);
}

Ajaxを利用してCSVファイルを読み込んでいるコードになっています.

CSVはテキストデータなので文字列として扱い,splitメソッドを用いて,改行コードごとに区切って配列を作成します.

var tempArray = csvData.split("\n");

さらに,その配列の中身の文字列をカンマで区切り,レコードと項目の2次元配列を作成します.

var csvArray = new Array();
for(var i = 0; i<tempArray.length;i++){
    csvArray[i] = tempArray[i].split(",");
}

コンソールに配列を出力してみると,以下のようになっています.

まとめ

配列にすることで扱いやすくなるうえ,CSVファイルはexcelなどの表計算ソフトで簡単に出力でき,管理も用意なので,地図の座標なんかの管理には最適かと思います.

※CSVファイルの文字コードによっては文字化けが発生する場合があります.

追記
読み込んだデータの項目内にカンマ(,)や改行コードが混ざっている場合の対処方法について

カンマが入っている場合

CSVファイルを作成する際に\やバックスラッシュなどの文字を入れ,項目ごとの配列作成前に(\,)を別の文字にreplaceし,配列作成後に(\,)を元に戻す.


abc\,abc,1\,200

改行コードが入っている場合

レコードを区切る改行コードがCR+LFであった場合は,CR+LFによってレコード単位の配列を作成することが出来ます.

.split("\r\n");

レコードを区切る改行コードがLFで,項目内の改行コードがLFである場合はカンマ同様に¥やバックスラッシュなどの文字を挿入しておき,配列作成前後で置換する必要があります.


"abc\(LFによる改行)abc"

レコードを区切るための改行コードは,作成するソフトやOSによって差があるので,バイナリエディタで確認するか,文字コードを出力して確認して下さい.
また,データの送り手側と受け手側で,項目の記述方法について取り決めを行ったほうが確実かと思われます.