CSVで読み込んだテキストデータをページによって表示件数を変えたい。

Question

実現したいこと

トップページとニュース一覧ページページに表示するテキスト情報をCSVで作成し、jquery.csv.jsを使って読み込んでいます。
そのデータを参照の上、トップページは上から3件、ニュース一覧ページは全件表示をしたいと考えております。
hoge.com/　…上から3件表示
hoge.com/news/　…全件表示

御知恵を拝借いただければと思います

発生している問題・エラーメッセージ

まずはトップページ用にfor文の中に ifで分岐を作成したのですが正しく表示がされていません。

該当のソースコード

$(function(){
    //news CSV読み込み
    var target = '#news__list';
    var csvList;
    var count = 1;
    var insert = '';
    $.ajax({
        url: 'news.csv',
        success: function(data) {
            
            // csvを配列に格納
            csvList = $.csv.toArrays(data);
        
            // 挿入するHTMLを作成
            for (var i = 1; i < csvList.length; i++ ) {
                if(count < 4){
                    var cat = csvList[i][0];
                    var title = csvList[i][1];
                    var date = csvList[i][2];
                    var text = csvList[i][3].replace(/\n/g,'<br>');
                    var url = csvList[i][4];
                    insert += '<dl class="' + cat +'"><dt><span class="title">' + title + '</span><span class="date">' + date + '</span></dt>';
                    insert += '<dd><p class="news__text">' + text + '</p>';
                    if(url === undefined){
                            insert += '';
                        } else{
                            insert += '<p class="news__link"><a href="' + url + '" target="_blank">' + url + '</a></p>';
                        }
                    insert += '<p class="news__cat">' + cat + '</p></dd></dl>';
                    
                    $(target).append(insert);
                    count++;
                }
                
            }
            
            //news アコーディオン
            $('#news__list dl dt').click(function(){
                $(this).toggleClass('open');
                $(this).next('dd').slideToggle();
            });
        }
    });   
});

<div id="news__list">
</div>

Category,title,date,text,link
"カテゴリ1","見出し","日付","本文","URL"
"カテゴリ2","見出し","日付","本文","URL"
"カテゴリ3","見出し","日付","本文","URL"
"カテゴリ4","見出し","日付","本文","URL"
"カテゴリ5","見出し","日付","本文","URL"
"カテゴリ6","見出し","日付","本文","URL"
"カテゴリ7","見出し","日付","本文","URL"
"カテゴリ8","見出し","日付","本文","URL"
"カテゴリ9","見出し","日付","本文","URL"

Comments

[Lhankor_Mhy]

$.csv というのは一般的なjQueryのメソッドではないと思いますが、何らかのライブラリを使っていますか？

[yukalino]

コメントありがとうございます。
jquery.csv.js (https://cdnjs.com/libraries/jquery-csv) を使用しております。

Answer 1

スコープの広い変数を使っているので、前のループのが残っている感じです。
現状のコードを最大限生かすとこんな感じでは。

$(target).append(insert);
insert = ''; // これを忘れている
count++;

さらにいいのは、スコープを狭くすることです。

Comments

[yukalino]

コメントありがとうございます。
insert = '';　を追加することでループが希望通りのものになりました。

もしお時間に余裕がありましたら、スコープを狭くした記述例などを教えていただければ嬉しいです。

[Lhankor_Mhy]

for ループの中で let で変数宣言すると、ループごとのスコープになりますので、変数にヌル文字を代入してクリアする必要がなくなるはずです。

Answer 2

「hoge.com/」と「hoge.com/news/」ではページが違うのですから、呼び出し方を変えるだけだと思いますが？

Comments

[yukalino]

コメントありがとうございます。
1ファイル内でif等でうまく出し分けができればと思うのですが難しいでしょうか？

[yambejp]

「hoge.com/」と「hoge.com/news/」が1ファイルという状況がわからないのですが、htmlは別で、jsを1つにまとめたいということですか？

location.hrefをつかって場合分けするとかでしょうか？

[yukalino]

回答が分かりづらくて申し訳有りません。
htmlは別ですがjsは1ファイルでということです。

var page = location.href;
if(page.match('news')){～}

という形で振り分けできそうです。ありがとうございます。

[yambejp]

if(/news\/?/.test(page)){

みたいな方が良いかもしれません
「news」もしくは「news/」で終わるURL

[yukalino]

ありがとうございます。
参考にいたします