for文でn回ずつループさせる

Question

for文を使ってjsonの要素を抜き出したいと考えています。
フィルタリングで要素の出し分けを行い、8個ずつ表示させたいと考えています。
最初に8個表示させて、「もっと見る」をクリックでさらに8個ずつ追加していくことはできるのでしょうか？

<form>
　　<span>
　　　　<input type="radio" name="list" value="all" checked>
　　　　<label>All</label>
　　</span>
　　<span>
　　　　<input type="radio" name="list" value="cate">
　　　　<label>cafe</label>
　　</span>
　　<span>
　　　　<input type="radio" name="list" value="tokyo">
　　　　<label>tokyo</label>
　　</span>
　　<span>
　　　　<input type="radio" name="list" value="autum">
　　　　<label >autum</label>
　　</span>
</form>
<ul id="imageWrap"></ul>
<p class="more-btn">もっと見る</p>

//変数設定
var $imageWrap=$("#imageWrap");
var alldata=[]; //ここはすべてのデータを保持しておく配列
var filterdata=[]; //フィルターを掛けたデータを保持する配列

/最初に読み込んだ時に発生する関数
$.getJSON('jsonのソース',init);

function init(data){
//全データを保持しておく
alldata=data;

//とりあえず全データを代入しておく
filterdata=alldata;

//データを表示させる
display();
}

//画像表示させるための関数
function display(){
　　$imageWrap.empty();
　　var dataArray = filterdata;
　　for(var i=0; i<=7; i++){
　　　　$('<div class="elm"><img src="'+filterdata[i].url+' "></div>').appendTo($imageWrap);
　　}
}

//ラジオボタンが変わった時にフィルタリングする関数
$('input:radio').change(function(){
　　//チェックボタンの状況によってフィルタリングする
　　var cate=$(this).val();
　　//フィルターの配列をいったん空っぽにする
　　filterdata=[];

　　if(cate==="all"){//allが選択されたら全データを保持
　　　　filterdata=alldata;

　　}else{ 
　　　　filterdata=$.grep(alldata,function(n){
　　　　　　return n.category===cate;
　　　　});
　　}

　　display();
});

//もっと見るで要素を追加させたい
$('.more-btn').click(function(){
　　display();
});

参考にしたのはこちらのサイトです。
http://the-zombis.sakura.ne.jp/wp/blog/2014/01/03/post-2094/

ご教授いただけますと幸いです。
よろしくお願い致します。

Comments

[y_waiwai]

そりゃ、できるでしょう

[m.ts10806]

お手元のコードのインデントをきちんとつけてから質問にコードを添付しなおしてください（できればコードフォーマット機能のあるエディタを使いましょう）

[kei344]

当質問を含め過去の質問について、「解決済」になっていないものが多数見受けられます。解決したものは「ベストアンサー」を選び、自力で解決した場合はその方法を解答欄に書き、もし万が一解決していないのであれば質問を編集するなどしてみてください。

Answer 1

filterDataの何番目からアクセスするかをdisplayの引数に追加してあげれば良いと思います。
下記コードのデバッグはしていません。参考程度にお願いします。

//変数設定
var $imageWrap = $("#imageWrap");
var alldata = []; //ここはすべてのデータを保持しておく配列
var filterdata = []; //フィルターを掛けたデータを保持する配列

//最初に読み込んだ時に発生する関数
$.getJSON('jsonのソース', init);

function init(data) {
    //全データを保持しておく
    alldata = data;

    //とりあえず全データを代入しておく
    filterdata = alldata;

    //データを表示させる
    display(0);
}

const MAX_DISPLAY_COUNT = 8;

//画像表示させるための関数
function display(startIndex) {
    $imageWrap.empty();
    for (var i = startIndex; i < startIndex + MAX_DISPLAY_COUNT; i++) {
        if(!filterdata[i]){
            return;
        }
        $('<div class="elm"><img src="' + filterdata[i].url + ' "></div>').appendTo($imageWrap);
    }
}

let currentDisplayCount = 0;

//ラジオボタンが変わった時にフィルタリングする関数
$('input:radio').change(function () {
    //チェックボタンの状況によってフィルタリングする
    var cate = $(this).val();
    //フィルターの配列をいったん空っぽにする
    filterdata = [];

    if (cate === "all") {//allが選択されたら全データを保持
        filterdata = alldata;

    } else {
        filterdata = $.grep(alldata, function (n) {
            return n.category === cate;
        });
    }

    currentDisplayCount = 0;
    display(currentDisplayCount);
});

//もっと見るで要素を追加させたい
$('.more-btn').click(function () {
    currentDisplayCount += MAX_DISPLAY_COUNT;
    display(currentDisplayCount);
});

Comments

[ysfree14]

ご回答ありがとうございます。
上記の通り、コードを修正したのですが、
「もっと見る」をクリックで新しい要素は表示できたのですが、既存の表示していたものが消えてしまいます。
現状表示している下に、８個ずつ追加表示していくにはどうすれば良いのでしょうか？

何度もすいませんが、どうぞよろしくお願い致します。

[BluOxy]

$imageWrap.empty();をフィルタリングするときだけ実行するよう修正すれば良いかと思います。

[ysfree14]

ありがとうございます。
意図した通りに動くようになりました。

フィルタリングをした場合、もし要素が８個以上なければ「もっと見る」ボタン表示しないという処理を入れたいのですが、どうすればいいでしょうか。
フィルタリングのところに下記のようなコードを入れたのですが、最初から消えてしまいます、、

$('.more-btn').show();
var counter = 0;
$('jsonで読み込む要素').each(function(){
　counter++;
　if(counter <= 8) {
　　$('.more-btn').hide();
　}
});

[BluOxy]

質問がまた変わってくるのでこちらは閉めて頂き、新しく質問を立てて頂ければ幸いです。

このコメント欄でそちらの質問についてのこれ以上の返信は出来かねますが、1点ぼやくとするなら下記のような修正で出来るんじゃないかと思います。

function display(startIndex) {
$imageWrap.empty();
$('.more-btn').show();
for (var i = startIndex; i < startIndex + MAX_DISPLAY_COUNT; i++) {
if(!filterdata[i]){
$('.more-btn').hide();
return;
}
$('<div class="elm"><img src="' + filterdata[i].url + ' "></div>').appendTo($imageWrap);
}
}

[ysfree14]

ご回答ありがとうございます。
承知しました、解決しなければ新たに質問立てさせていただきます。