JavascriptのみでデータをMySQLのように扱えるJavascriptDBは既存のデータの抽出にも使える。

Excelから書き出したCSVデータやCSVで作られているファイルから、必要な条件や検索などでマッチしたデータを表示するのもJavascriptDBを使えば簡単。
通常のHTMLファイルで構築しているページではデータの更新ごとにHTMLベースで修正していかなくてはならないが、JavascriptDBを使っておけばデータの更新は元になっているCSVのファイルのみを更新していくだけで済むのもこの方法を使うポイントとも言える。
当然のことながら、数千、数万件のデータならMySQL等のデータベースを利用すべきだが、データの上限が200〜300件程度なら、十分検討に値する選択肢といえる。

外部CSVファイルの読み込みにはAjaxを使う。

$.ajax({
	url: ’list.csv’,
	type: 'get',
	dataType: 'text',
	async: false
}).success(function(data){
	//読み込んだデータの処理
});

上記スクリプトでは同じディレクトリに置いた「list.csv」という名前のCSVデータファイルを読み込んでいる。
今回は、読み込んだデータを改行ごとに分割、各行ごとにカンマで分割して配列化し、JavascriptDBの書式に従いデータに追加する。

$.ajax({
	url: filename,
	type: 'get',
	dataType: 'text',
	async: false
})
.success(function(data){
	//改行で分割
	lines = data.split("\r\n");
	for(var i=0; i < lines.length; i++){
		if(lines[i] != ""){
			//カンマで分割して配列に
			var col = lines[i].split(",");
			//配列をテーブルに追加
			DBTest.Insert("members",col);
		}
	}
});

この処理はfunction化しておくと便利

一連の流れをコードにすると

//データベースをセット

DBTest = new Database ("DBTest");

//テーブル名とカラム名をセット

DBTest.CreateTable("members",Array("id","login","passwd","tel","fax"));

//ファイルを取得してデータに追加

csvInsert("list.csv");

//select文で抽出

var selectArr1 = DBTest.Select('select * from members');

//書き出し

DBTest.View(selectArr1,document);

JavascriptDBの初歩的な入手方法や設定・解説は、「JavaScriptのみでデータがMySQLのように使えるjavascriptDBの使い方」や「javascriptDBで出力されるタグを変更したい時はこの方法」を参照してもらいたい。

今回の解説

1. head内でJavascriptを読み込む

HTML

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="db_core.js"></script>

2. body内に以下のスクリプトを設置

JAVASCRIPT

<script>

//データベースをセット
DBTest = new Database ("DBTest");

//テーブル名とカラム名をセット
DBTest.CreateTable("members",Array("id","login","passwd","tel","fax"));

//ファイルを取得してデータに追加
csvInsert("list.csv");

//select文で抽出
var selectArr1 = DBTest.Select('select * from members');

//書き出し
DBTest.View(selectArr1,document);

//Ajaxでファイルを取得してデータ追加するfunction
function csvInsert(filename){
	$.ajax({
		url: filename,
		type: 'get',
		dataType: 'text',
		async: false
	})
	.success(function(data){
		//改行で分割
		lines = data.split("\r\n");
		for(var i=0; i < lines.length; i++){
			if(lines[i] != ""){
				//カンマで分割して配列に
				var col = lines[i].split(",");
				//配列をテーブルに追加
				DBTest.Insert("members",col);
			}
		}
	});
}

</script>

「list.csv」の中身

TEXT

1,Jose Ramon,Torrent de l'Olla,57,934856890
2,Antonio,Via Augusta,6,932124739
3,Aurora,Via Augusta,6,932124739
4,Anun,Corcega,46,915485312
5,Juanma,Pl. Menorca,4,977982962
6,Joan,Palafrugell,100,973958200
7,Jimena,Republica Argentina,36,932110120

今回のサンプルページ

同じように設置しても表示されない時は、CSVファイルの文字コードや改行コードを確認すると解決できることが多い
また、Chromeの場合ローカルではうまく動かないから、サーバーにアップしてテストするといい。