【jquery】$.postを利用してCSVを読み込む

jquery

jQueryの$.postを利用してCSVを読み込む案件がありそうだったので、今後もそういうのありそうなのでメモ。

CSVを読み込むPHPファイル

今回はCSVをPHPで読みこむのでPHPファイルを用意する。
今回は読み取るだけなのでfopen関数で読み取りモードで開く。

$id,
		"name"=>$name,
		"pos1"=>$pos1,
		"pos2"=>$pos2,
		"url"=>$url,
		"plot"=>$plot,
		"detail"=>$detail
		);
	//一行データをまとめる配列に追加する
	$datalist[]=$list;
	}
	fclose($fp);
	//ポイント2:jsonに変換
	echo json_encode($datalist);
?>

上記の流れとcsvを読みこんで各項目をlist関数で抜き出して、一店舗のデータを連想配列につっこんでさら全店舗をまとめる配列$datalistにつっこんでいる。

ポイント1:文字モードを変換する

上記のプログラムで「mb_convert_variables」を利用しているがこれがとっても便利でした。なぜかというと今回のようにcsvファイルから情報を抜き出す場合は配列で処理したりすることが多いのですが、「mb_convert_variables」は配列の中まで文字コードを変換してくれます。他に「mb_convert_encording」もありますが、こちらは文字列にしか対応してないので一旦文字列を抜き出さないといけないのです。下記参照

ポイント2:jsonに変換

mb_convert_variablesでutf8に変換したらさらに配列にまとめたデーターをjson_encodeでjsonファイルに変換してechoで出力する。ただしjson_encodeはutf8でエンコードされたデータしか扱えないので注意！
今回はもちろんutf8に変換しているので大丈夫です。下記参照

jqueryの$.postでphpファイルからjsonデータを取得する

phpでjsonファイルの変換が成功してれば、後はjqueryの$.postメソッドで読み込むだけです。$.postに関しては下記参照

//ポイント1:$.postのコールバック関数でdataを受け取る
$.post("loadcsv.php","",function(data){
//取得したデータの長さ お店
for(var i=0; i

ポイント1:$.postのコールバック関数でdataを受け取る


$.postのコールバックでdataという変数にはjsonファイルに変換された配列データが入っている。


ポイント2:[.]シンクタックでデータにアクセス


loadcsv.php内でcsvを読み込んだ後list関数で分割したデータを$listに突っ込む時に連想配列にしているが、jsonファイルに変換して、jquery側で読み込んだ後は「.」ドットシンクタックでアクセスすることができる


ちなみに$.postで受け取った「data」はload.csvでの「$datalist」にあたる為、data自体は2重配列なので、「data[0].name」は「$datalistの中の0番目の$listのnameの値」という意味になる。