jqueryのajax関数を使ってcsvの読み込み

Question

今現在csvを読み込み、一括で出力する所までは成功したのですが、
このcsvデータをセレクトメニューの項目ごとに、出力するにはどのようにすればよいでしょうか。

例えばサッカーという項目を選択したならcsvの2行目の「100」と「2」というデータが、
「人数：」と「順位：」の：の横に表示されるという具合です。
項目を選択するごとにcsvのデータに沿って値が変わるというものです。

ここに記述しているプログラムではどの項目を選択しても「人数,順位 100,1 200,2 300,3 400,4 500,5」というデータが表示されるだけです。これからcsvデータの行数も増えるかもしれないです。

jqueryのバージョンは2.1.4.minです。

ご回答よろしくお願い致します。

<form>
	<select id="ajax__button">
		<option value="">選ぶ</option>
		<option value="soccer">サッカー</option>
		<option value="baseball">野球</option>
		<option value="tennis">テニス</option>
		<option value="basket">バスケット</option>
		<option value="volley">バレー</option>
	</select>
</form>

<div id="ajax__text"></div>
<div id="pop">人数：</div>
<div id="rank">順位：</div>

$( function() {
	$( '#ajax__button option' ) .click(
		function() {
			$.ajax( {
				url: 'sample.csv',
				type: 'get',
				dataType : 'text',
				cache : false,
				success: function( data ) {
					$( '#ajax__text' ).html( data );
				}
			} );
		 }
	);
} );

csvの中身です
人数,順位
100,1
200,2
300,3
400,4
500,5

https://jsfiddle.net/ululami/gLopkzew/2/

jsfiddleだとcsvが読み込まれなくジオシティーズの方にもアップしました。
http://www.geocities.jp/toriniku_torichan/test/test.html

Comments

[Yasumi.Mizuki]

ジオシティーズでもcsvが読み込まれていないようですが、どのような環境で動作を試したのでしょうか・・・

[owl]

セレクトメニューの「選ぶ」をクリックして項目を選択しても表示されないでしょうか。

[t_obara]

ajaxでサーバにどのパラメータを選択されたかを伝え、その内容を元にサーバ側で必要な情報を返却するようにすれば良いのではないでしょうか。

[Yasumi.Mizuki]

「表示されないでしょうか。」と仰っているということは、質問者さんの環境では動作しているのでしょうか？

[owl]

今確認しました所firefoxでのみ動作するようです。申し訳ありません。

Answer 1

自分のサーバーにCSVを読み込んで操作するなら、jqueryの他に
CSVをJavaScriptで扱えるデータ形式に変換する必要があります。
正規表現やsplitなどを駆使すれば自分でも変換することは可能ですが、
圧倒的にライブラリを使う方が楽だと思いますにゃー。
たとえばこのような： http://papaparse.com/

CSVを変換する方法がきまったら、

1. ページが読み込まれた時にCSVを読み込んでおいて、JSONないし配列に変換しておく
2. セレクトメニューのchangeイベントで変換済みのCSVデータをvalueなどの値をキーにしてとりにいく
3. 取得したデータをHTMLに流し入れて表示

みたいな流れで実装できると思いますにゃ。

あとはCSVファイルをGoogle Spreadsheetにアップロードして、
Google Visualization APIを使ってデータを利用するという方法もあります。

Google Visualization APIの入門については白石さんが書かれた説明がわかりやすいです：
https://builder.japan.zdnet.com/tool/20369905/

こちらの場合はファイルの置き場所が自分のサーバーではなくGoogle Driveになり、
CSVを変換するライブラリがGoogle Visualization APIに置き換わる感じですにゃ。

Comments

[owl]

返信遅れて申し訳ないです。
jsonに変換してcsvを取得できました。
流れを書いて頂き大変理解しやすかったです。
本当にありがとうございます。

Answer 2

サーバー側でcsvをjsonに変換するプログラムを用意するのがラクでしょう。
もしサーバー側のプログラムを作れないというのであれば
うけとったdataを地味に改行マークやカンマで分割し、jsonライクな
データにした上で、javascriptでselectを更新することになります。
ただし、csv上にsuccerやbaseballというキーになる文字がないため
順番だけがたよりになります。
これはデータ管理上危険ですのであまりお勧めできません

Comments

[owl]

返信遅れて申し訳ないです。
なんとかjsonに変換してcsvを読み込むことができました。
本当にありがとうございます。