jQueryでCSVを読み込んでみる

jQueryでCSVを読み込み、表示させるサンプルを作成しました。

使用するライブラリ・ファイル

今回jQuery.csv.jsを使おうと思ったのですが、本家jQueryのサイトからはなくなっているようなので、
こちらのサイトのものを使用させていただきました。
　

読み込むCSVは以下の内容です。
CSVファイルサンプル

CSVファイルの文字コードはUTF-8ですが、エクセルで作成した後はShift-jisになっているので、
文字コードをUTF-8に変更する必要があります。
　

サンプルコード

JavaScript

$(function() {
	var target = '#news';
	var csvList;
	var insert = '';
	$.ajax({
		url: 'list.csv',
		success: function(data) {

			// csvを配列に格納
			csvList = $.csv()(data);

			// 挿入するHTMLを作成
			for (var i = 1; i < csvList.length; i++) {
				insert += '<li id="' + csvList[i][0] + '">';
				insert += '<div class="image"><img src="' + csvList[i][4] + '" /></div>';
				insert += '<p class="date">' + csvList[i][1] + '</p>';
				insert += '<p class="title">' + csvList[i][2] + '</p>';
				insert += '<p class="sentence">' + csvList[i][3] + '</p>';
				insert += '</li>';
			};
			$(target).append(insert);
		}
	});
});

HTML

<ul id="news"></ul>

CSVファイル読み込みのデモページ