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

Question

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

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

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

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

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": ""
},

]   

Comments

[yambejp]

大量のデータをバックグラウンドで読み込んでクライアント側に
フィルタをさせるのでしょうか？
フィルタするのはサーバー側の処理が妥当です

[ysfree14]

楽天GOLDにjsonファイルをアップしようと考えており、サーバー側の処理というのが恐らくできない環境です。
クライアントではなく全て自社内で行います。

[yambejp]

なにか論点がずれている感じがします
大量のjsonデータをもっていて、それをフィルタして
どこかにアップするのですね？
その大量のjsonデータはRDBなどに保持して、フィルタしてください
javascriptでフィルタするの現実的ではありません

> クライアントではなく全て自社内

私のいうクライアントは「ユーザーがブラウザで」という意味ですが
質問者さんのクライアントは顧客という意味ですか？

[ysfree14]

すいません、よく理解できていないのですが、
javascriptで８個ずつjsonから引っ張ってくる方法自体が現実的ではないということですよね
ただ、データベースなどの知識はないのでjvascriptで実装したいです。

クリアアントについて勘違いしておりました、申し訳ありません。

[yambejp]

> javascriptで８個ずつjsonから引っ張ってくる方法自体が現実的ではない

見た感じだと「8個ずつ」的な処理にはなっておらず
全部読んできてますよね？
全体像がわからないのでなんとも言えませんが、何百、何千の
データを呼び出すと負荷がたかくなる割に結局使うデータは
少ししか無いというアンバランスになるので
サーバー側で吐き出すJSONを減らしてもらうのが原則です

[ysfree14]

一応htmlは8個ずつ生成されている状態なのですが、裏でjson自体は全データ読んでしまう状態になっているのでしょうか？

[yambejp]

> $.getJSON('jsonのソース',init);

「jsonのソース」が提示されていないので手におえません
こう書かれていればjsonでデータが大量にあるものだと
理解されても仕方ありません

[ysfree14]

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

[yambejp]

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

[think49]

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

Answer 1

例示された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);

Comments

[ysfree14]

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

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