質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

質問する

ただいまの
回答率

88.33%

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

解決済

回答 1

投稿 ・編集

  • 評価
  • クリップ 1
  • VIEW 466
ysfree14

ysfree14

score 11

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/

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

more_vert3 件の質問への追記・修正依頼

質問への追記・修正、ベストアンサー選択の依頼

  • y_waiwai

    y_waiwai

    2019/08/19 17:45

    そりゃ、できるでしょう

    キャンセル

  • m.ts10806

    m.ts10806

    2019/08/19 17:52

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

    キャンセル

  • kei344

    kei344

    2019/08/21 02:06

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

    キャンセル

回答 1 件

link

checkベストアンサー

+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);
});

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/08/20 17:32 編集

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

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

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

    キャンセル

  • 2019/08/20 17:51

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

    このコメント欄でそちらの質問についてのこれ以上の返信は出来かねますが、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);
    }
    }

    キャンセル

  • 2019/08/23 14:09 編集

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう！

  • ただいまの回答率 88.33%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる
質問する

関連した質問

同じタグがついた質問を見る

SNSアカウントでログイン

teratailアカウントでログイン

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る