【jQuery】Excelで作ったCSV表データを読み込んで配列にする

jQueryを用いて、Excelで作ったCSV表データを読み込み、配列にする方法を紹介します。

手順

  1. CSVファイルを読み込むまずは、CSVファイルを読み込みます。読み込みにはjQueryのAjax機能を使用します。この際、Shift-JISであることを明示します。Excelが保存するCSVはShift-JISなのでこれを行わなければ文字化けを引き起こす原因となります。
  2. ライブラリにて配列にするそして、「jquery.csv.js」という流通しているライブラリを使用し、配列にします。

これらをjQueryの$.when().done().fail()コマンドを使用し、非同期で行います。

jquery.csv.js

CSV及びタブ区切りファイルを配列に変換してくれるライブラリ「jquery.csv.js」はこちらからダウンロード可能です。

reCatnap: お知らせ：JQueryでCSVを配列に変換_($
ExcelにHTML、CSSとかjavascriptなどPCに関連するお勉強・小技のメモ
tips.recatnap.info

ダウンロード不可になっているようなので再配布します。

jquery.csv.js

» jquery.csv.jsを表示

/* Usage:
 *  jQuery.csv()(csvtext)  returns an array of arrays representing the CSV text.
 *  jQuery.csv("\t")(tsvtext)  uses Tab as a delimiter (comma is the default)
 *  jQuery.csv("\t", "'")(tsvtext) uses a single quote as the quote character instead of double quotes
 *  jQuery.csv("\t", "'\"")(tsvtext) uses single & double quotes as the quote character
 *  jQuery.csv(",", "", "\n")(tsvtext)  returns an array of arrays representing the CSV text.
 */
jQuery.extend({
 csv: function(delim, quote, lined) {
  delim = typeof delim == "string" ? new RegExp( "[" + (delim || ","   ) + "]" ) : typeof delim == "undefined" ? ","    : delim;
  quote = typeof quote == "string" ? new RegExp("^[" + (quote || '"'   ) + "]" ) : typeof quote == "undefined" ? '"'    : quote;
  lined = typeof lined == "string" ? new RegExp( "[" + (lined || "\r\n") + "]+") : typeof lined == "undefined" ? "\r\n" : lined;

  function splitline (v) {
   var arr  = v.split(delim), out = [], q;
   for (var i=0, l=arr.length; i<l; i++) {
    if (q = arr[i].match(quote)) {
     for (j=i; j<l; j++) {
      if (arr[j].charAt(arr[j].length-1) == q[0]) {
       break;
      }
     }
     var s = arr.slice(i,j+1).join(delim);
     out.push(s.substr(1,s.length-2));
     i = j;
    }
    else {
     out.push(arr[i]);
    }
   }

   return out;
  }

  return function(text) {
   var lines = text.split(lined);
   for (var i=0, l=lines.length; i<l; i++) {
    lines[i] = splitline(lines[i]);
   }
   
   var last = lines.length - 1;
   if (lines[last].length == 1 && lines[last][0] == "") {
    lines.splice(last, 1);
   }
   
   return lines;
  };
 }
});

» 非表示

プログラム例

サンプルはこちらから。サンプルでは表の表示にDataTablesを使用しています。

$.when(
    $.ajax({
        url: 'database.csv',
        cache: false,
        dataType: "text",
        beforeSend : function(xhr) {
            xhr.overrideMimeType('text/plain;charset=Shift_JIS');
        },
    })
)
.done(function(data) {
    data=$.csv()(data[0]);
})
.fail(function() {
    alert("データベースの読み込みエラーが発生しました。");
});

コメント