【Javascript】読み込んだCSVから特定の値で表示場所を切り分けたい

お疲れ様です。javascript初心者のポテトです。
現在CSVファイルをJavascriptで読み込んで、HTML上に生成するということをやっています。
表示自体はできたのですが、そこからジャンルの切り分けをしたいと考えております。

例えば下記のようなCSVがあるとします。
映画 , 30 , 2000円
映画 , 10 , 1000円
アニメ , 50 , 3000円
ドラマ , 100 , 5000円
ドラマ , 40 , 7000円

そこから1つ目の値が
[映画] だった場合は <ul id="movie"></ul> の中に表示。
[アニメ] だった場合は <ul id="anime"></ul> の中に表示。
[ドラマ] だった場合は <ul id="drama"></ul> の中に表示。

といった具合にCSVの1つ目の値で表示場所を切り分けたいと考えています。
そこで下記のようなJavascriptを書いたのですがまったく動かず悩んでいます（現状何も表示されません）。。。
基本的なことが間違ってる気がするので是非ともご教授していただけると幸いです。

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

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

          function genre(seisei){
            if(csvList[i][0] == "映画"){
                var movie = '#movie';

                // 挿入するHTMLを作成
                for (var i = 1; i < csvList.length; i++) {
                    insert += '<li><p>' + csvList[i][1] + csvList[i][2] + '</p></li>';
                };
                $(movie).append(insert);

            } else if(csvList[i][0] == "アニメ") {
                var anime = '#anime';

                // 挿入するHTMLを作成
                for (var i = 1; i < csvList.length; i++) {
                    insert += '<li><p>' + csvList[i][1] + csvList[i][2] + '</p></li>';
                };
                $(anime).append(insert);
            }

            } else {
                var drama = '#drama';

                // 挿入するHTMLを作成
                for (var i = 1; i < csvList.length; i++) {
                    insert += '<li><p>' + csvList[i][1] + csvList[i][2] + '</p></li>';
                };
                $(drama).append(insert);
            }
        }
    }
});

});

退会済みユーザー

2015/11/27 21:47

開発環境は何ですか？(ローカル？サーバー？）

PotatoHead

2015/11/28 04:23

開発環境はサーバーで行っています。（こちら解決いたしました！ご質問いただいたのに申し訳ないです、、、）

行動規範の内容に同意します

回答2件

successの中身を確認してください。
1行目：csvを配列に格納
2行目：関数genreを定義

この作った関数genreが宣言されたまま、実行されずに終了していることが動かない主な原因です。
実際には関数genreも下記の問題を抱えており、更なる修正が必要です。

関数内部の条件分岐にiが使われているが、iはその配下のfor文で宣言されているのでエラーが出て止まる
引数seiseiってなんだろう？→要らないなら()とすることで引数なしと定義できる

jQuery でCSVデータを簡単に取り扱える「jQuery CSV」
このサイトにズバリな回答が用意されていますので、
コレの通りに使ってみてはどうでしょうか？
jQuery.eachも使われており、私個人としてもかっちょいい書き方だと思います。

ちなみにfunction(){}は無名関数と呼ばれ、その場で使われる使い捨ての関数です。

投稿2015/11/28 00:39

編集2015/11/28 00:44

miyabi-sun

総合スコア21158

PotatoHead

2015/11/28 04:18

ご回答ありがとうございます。丁寧に教えていただきありがとうございます！なあなあにしている部分をこんなに親切に解説いただき感動しております。。。今回は別の方にベストアンサーとさせていただきますが大変助かりました。ありがとうございます。

行動規範の内容に同意します

ベストアンサー

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5<meta http-equiv="Pragma" content="no-cache">
6<meta http-equiv="Cache-Control" content="no-cache">
7<meta http-equiv="Expires" content="0">
8<meta http-equiv="X-UA-Compatible" content="IE=edge">
9<script type="text/javascript"
10	src="https://code.jquery.com/jquery-1.11.3.js"></script>
11<script type="text/javascript"
12	src="http://cly7796.net/wp/sample/ajax-get-csv/jquery.csv.js"></script>
13<script type="text/javascript">
14	$(function() {
15		$.ajax({
16			url : 'list.csv',
17			success : function(data) {
18
19				// csvを配列に格納
20				var csvList = $.csv()(data);
21
22				// 挿入するHTMLを作成
23				for (var i = 0; i < csvList.length; i++) {
24					var insert = '<li><p>' + csvList[i][1] + ', '
25							+ csvList[i][2] + '</p></li>';
26					var target;
27					if (csvList[i][0] === "映画") {
28						target = '#movie';
29					} else if (csvList[i][0] === "アニメ") {
30						target = '#anime';
31					} else {
32						target = '#drama';
33					}
34					// targetへ追加
35					$(target).append(insert);
36				}
37			}
38		});
39	});
40</script>
41</head>
42<body>
43	<ul>
44		<li>映画
45			<ul id="movie"></ul>
46		</li>
47		<li>アニメ
48			<ul id="anime"></ul>
49		</li>
50		<li>ドラマ
51			<ul id="drama"></ul>
52		</li>
53	</ul>
54</body>
55</html>