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

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

ただいまの
回答率

87.77%

for文でn回ずつループさせ、タブ出し分けを2つ設置させたい

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 481

score 11

以前にもこちらで質問させていただいたのですが、解決できておらず教えていただきたいです。

for文を使ってjsonの要素を抜き出しています。
フィルタリングで要素の出し分けを行い、下記コードにて8個ずつ表示させている状態です。
(もっと見るボタンをクリックでさらに8件ずつ表示していく)

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

フィルタリングが1箇所の場合は思い通りの動作ができたのですが、2つの異なったjsonを読み込み、フィルタリングもそれぞれ2箇所に分けて設置したい場合、どのように記述すればよいのでしょうか?

id="boxes"とid="select-boxes"にそれぞれ別のフィルタリングを設置したいと考えています。
よろしくお願い致します。

<form class="original-filter">                    
  <label class="btn-on">
    <input type="radio" name="list" value="all" checked="checked">
    <span>All</span>
  </label>
  <label>
    <input type="radio" name="list" value="new">
    <span>new</span>
  </label>
  <label>
    <input type="radio" name="list" value="re">
    <span>re</span>
  </label>
</form>

<div id="boxes" class="boxes cf"></div>
<div class="original-tab-more-btn">もっと見る</div>

<!--追加するフィルタリング-->                    
<form class="select-filter">                    
  <label class="btn-on">
    <input type="radio" name="list" value="all" checked="checked">
    <span>All</span>
  </label>
  <label>
    <input type="radio" name="list" value="s-new">
    <span>new</span>
  </label>
  <label>
    <input type="radio" name="list" value="s-re">
    <span>re</span>
  </label>
</form>

<div id="select-boxes" class="boxes cf"></div>
<div class="select-tab-more-btn">もっと見る</div>
<!--//追加するフィルタリング-->      
$(function(){

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

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

 function init(data) {
   //全データを保持しておく
   alldata = data;
   //とりあえず全データを代入しておく
   filterdata = alldata;
   //データを表示させる
   display(0);
 }
 
 const MAX_DISPLAY_COUNT = 8;

 //表示させるための関数
  function display(startIndex) {

  $('.original-tab-more-btn').show();
    for (var i = startIndex; i < startIndex + MAX_DISPLAY_COUNT; i++) {
      if(!filterdata[i]){
        $('.original-tab-more-btn').hide();
      return;
    }
    $('<div class="original-tab-elm"><a href="' + filterdata[i].url + '" target="_top" class="block"><div class="product-img img-col1"><img src="' + filterdata[i].img + '" alt="" id="product-img"></div><div class="label-wrap"><p class="img-label' + filterdata[i].labelName + '">' + filterdata[i].dateText + '</p><p class="img-label' + filterdata[i].labelName2 + '">' + filterdata[i].dateText2 + '</p></div><p class="price-text">' + filterdata[i].price + '</p></a></div>').appendTo($boxes);
    }
  } 
 
  let currentDisplayCount = 0;

  //ラジオボタンが変わった時にフィルタリングする関数
  $('.original-filter input:radio').change(function(){

    $boxes.empty();

    //チェックボタンの状況によってフィルタリングする
    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);

  });

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

});
[

{
"category": "new",
"url": "",
"img": "",
"labelName": "",
"dateText": "",
"labelName2": "",
"dateText2": "",
"price": ""
},        

{
"category": "re",
"url": "",
"img": "",
"labelName": "",
"dateText": "",
"labelName2": "",
"dateText2": "",
"price": ""
},

]   

↓追加するjsonです。

[

{
"category": "new-s",
"url": "",
"img": "",
"labelName": "",
"dateText": "",
"labelName2": "",
"dateText2": "",
"price": ""
},        

{
"category": "re-s",
"url": "",
"img": "",
"labelName": "",
"dateText": "",
"labelName2": "",
"dateText2": "",
"price": ""
},

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • ysfree14

    2019/10/21 18:48

    なるほど、申し訳ございません、、
    「jsonのソース」につきましては、上記jsonコードを入力したものを読み込ませているだけです。
    よろしくお願い致します。

    キャンセル

  • yambejp

    2019/10/21 18:54

    今までの流れをぶったぎって回答の方に書いておきます

    キャンセル

  • think49

    2019/10/22 13:23 編集

    @ysfree14 さん
    https://teratail.com/help/avoid-asking の「過去に投稿した質問と同じ内容の質問」を参照下さい
    https://teratail.com/questions/209799

    キャンセル

回答 1

+2

例示されたJSONと追加するJSONを連結する処理
(正直なにを聞きたいかさっぱりわかりません)

var a=[
  {
    "category": "new",
    "url": "",
    "img": "",
    "labelName": "",
    "dateText": "",
    "labelName2": "",
    "dateText2": "",
    "price": "",
    },
  {
    "category": "re",
    "url": "",
    "img": "",
    "labelName": "",
    "dateText": "",
    "labelName2": "",
    "dateText2": "",
    "price": "",
  },
  ];
var b=[
  {
    "category": "new-s",
    "url": "",
    "img": "",
    "labelName": "",
    "dateText": "",
    "labelName2": "",
    "dateText2": "",
    "price": "",
  },
  {
    "category": "re-s",
    "url": "",
    "img": "",
    "labelName": "",
    "dateText": "",
    "labelName2": "",
    "dateText2": "",
    "price": "",
  },
  ];
a=a.concat(b);
console.log(a);

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/10/22 12:47 編集

    ご回答ありがとうございます。
    フィルタリング1箇所では正常に動くのですが、新たに2箇所目を追加する際に、上記の連結などの処理が分からないためjsonをもうひとつ用意して、2つのjsonを読み込ませようと考えておりました。

    上記のようにjsonを連結させた場合、jQueryはどのように記述すればいいのでしょうか?
    よろしくお願い致します。

    キャンセル

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

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

関連した質問

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