Javascript Json项的计数器

我将json文件上传到HTML文件。在html项目中，我需要将json文件的产品信息加载到三个滑块中。我想在第一个滑块中获得前15个产品。我添加了一个计数器，前15项出现在第一个滑块中。这里没有问题。但我不希望前15个产品出现在第二个滑块中。然而，我所做的仍然是前十五种产品。我怎样才能解决这个问题

$( document ).ready(function() {
            loadJSON(function(response) {
              // Parse JSON string into object
                var products_JSON = JSON.parse(response);
                    var items = [];
                    var counter = 0;

                    products_JSON.forEach(function(item) {

                        if(counter < 15){
                            var str = "";
                            str += "<div class='swiper-slide'>";
              str += "<div class='vnx-most-inside-div'>";
              str += "<a href='"+ item.url +"' target='_self' title='"+ item.name +"'>";
              str += "<div class='vnx-privilege-products'>";
                            if(item.discount) {
                                  str += "<div class='vnx-prod discount'>"+ item.discount +"</div>";
                            }
                            if(item.params.isNew === "true") {
                                str += "<div class='vnx-prod new'>NEU</div>";
                            }
              str += "</div>";
              str += "<span class='prd-img'>";
              str += "<img src='"+ item.imageS+"' title='"+ item.name +"'>";
              str += "</span>";
              str += "<span class='prd-title'>"+ item.name +"</span>";
              str += "<div class='vnx-features'>";
                            if(item.params.land !== "undefined" || item.params.region !== "undefined" || item.params.art !== "undefined") {
              str += "<span class='prd-feature'>"+ item.params.land +"</span>";
                            str += "<span>|</span>";
                            str += "<span class='prd-feature'>"+ item.params.region +"</span>";
                            str += "<span>|</span>";
                            str += "<span class='prd-feature'>"+ item.params.art +"</span>";
                        }
                        else if(item.params.rebsorte !== "undefined") {
                            str += "<span class='prd-feature'>"+ item.params.rebsorte +"</span>";
                        }
              str += "</div>";
              str += "<div class='prd-prc'>";
              str += "<span class='new-price'>"+ item.priceText +"";
              str += "</span>";
                            if(item.oldPriceText !== "undefined") {
              str += "<span class='old-price'>"+ item.oldPriceText +"";
                        }
              str += "</span>";
              str += "</div>";
                            if(item.params.basePrice !== "undefined")
              str += "<div class='unit-liter-price'>"+ item.params.basePrice +"";
              str += "</div>";
              str += "</a>";
              str += "</div>";
              str += "</div>";

                            items.push(str);

                            counter++;
                        }

这是第一个滑块的计数器。它正在工作

$( document ).ready(function() {
                loadJSON(function(response) {
                    // Parse JSON string into object
                        var products_JSON = JSON.parse(response);
                        var items = [];
                        var counter = 15;

                        products_JSON.forEach(function(item) {

                            if(counter > 14 && counter < 30){
                                var str = "";
                                str += "<div class='swiper-slide'>";
                                str += "<div class='vnx-most-inside-div'>";
                                str += "<a href='"+ item.url +"' target='_self' title='"+ item.name +"'>";
                                str += "<div class='vnx-privilege-products'>";
                                if(item.discount) {
                                        str += "<div class='vnx-prod discount'>"+ item.discount +"</div>";
                                }
                                if(item.params.isNew === "true") {
                                    str += "<div class='vnx-prod new'>NEU</div>";
                                }
                                str += "</div>";
                                str += "<span class='prd-img'>";
                                str += "<img src='"+ item.imageS+"' title='"+ item.name +"'>";
                                str += "</span>";
                                str += "<span class='prd-title'>"+ item.name +"</span>";
                                str += "<div class='vnx-features'>";
                                if(item.params.land !== "undefined" || item.params.region !== "undefined" || item.params.art !== "undefined") {
                                str += "<span class='prd-feature'>"+ item.params.land +"</span>";
                                str += "<span>|</span>";
                                str += "<span class='prd-feature'>"+ item.params.region +"</span>";
                                str += "<span>|</span>";
                                str += "<span class='prd-feature'>"+ item.params.art +"</span>";
                            }
                            else if(item.params.rebsorte !== "undefined") {
                                str += "<span class='prd-feature'>"+ item.params.rebsorte +"</span>";
                            }
                                str += "</div>";
                                str += "<div class='prd-prc'>";
                                str += "<span class='new-price'>"+ item.priceText +"";
                                str += "</span>";
                                if(item.oldPriceText !== "undefined") {
                                str += "<span class='old-price'>"+ item.oldPriceText +"";
                            }
                                str += "</span>";
                                str += "</div>";
                                if(item.params.basePrice !== "undefined")
                                str += "<div class='unit-liter-price'>"+ item.params.basePrice +"";
                                str += "</div>";
                                str += "</a>";
                                str += "</div>";
                                str += "</div>";

                                items.push(str);

                                counter++;
                            }

---

这是第二个滑块的计数器。它不起作用。谢谢，试试这个。但请注意，你没有测试它，但它应该是有意义的

 var obj=[
      {'name':'JS'},
      {'name':'PYTHON'},
      {'name':'RUBY'},
      {'name':'ROR'},
      {'name':'DJANGO'},
      {'name':'ANGULAR'},
      {'name':'VB'}
    ];

  var block_size=2; //2 per block. change to 15 in your case
  var counter=0;

  //starting. open first slider

  document.write("<div class='swiper-slide'>");

  Object.keys(obj).forEach(function(key) {

    if(counter==block_size){
      //first 2 elements shown so close then open a new slide
      document.write('</div>')
      document.write("<div class='swiper-slide'>");
      //reset the counter now
      counter=0
    }
    //add the slide to the swiper slide now
    //you can check your conditions here and increment if the item is going to be added to the slider in fact.
    document.write(obj[key]['name'] + '<br/>');

    counter++;

});

  //in case you have unnclosed div swiper element

  if(counter<block_size){
    document.write('</div>');
  }

---

我不能用你想要的方法做这件事。另一种思维方式正在到来。但我不能再这样做了当我按下str时，我想使滑块不可见。然后我试着用切片来隐藏前15种产品。当我隐藏前15个产品时，我想使滑块可见。但他犯了一个错误

$( document ).ready(function() {
                loadJSON(function(response) {
                    // Parse JSON string into object
                        var products_JSON = JSON.parse(response);
                        var items = [];
                        products_JSON.forEach(function(item) {

                                var str = "";
                                str += "<div class='swiper-slide'>";
                                str += "<div class='vnx-most-inside-div'>";
                                str += "<a href='"+ item.url +"' target='_self' title='"+ item.name +"'>";
                                str += "<div class='vnx-privilege-products'>";
                                if(item.discount) {
                                        str += "<div class='vnx-prod discount'>"+ item.discount +"</div>";
                                }
                                if(item.params.isNew === "true") {
                                    str += "<div class='vnx-prod new'>NEU</div>";
                                }
                                str += "</div>";
                                str += "<span class='prd-img'>";
                                str += "<img src='"+ item.imageS+"' title='"+ item.name +"'>";
                                str += "</span>";
                                str += "<span class='prd-title'>"+ item.name +"</span>";
                                str += "<div class='vnx-features'>";
                                if(item.params.land !== "undefined" || item.params.region !== "undefined" || item.params.art !== "undefined") {
                                str += "<span class='prd-feature'>"+ item.params.land +"</span>";
                                str += "<span>|</span>";
                                str += "<span class='prd-feature'>"+ item.params.region +"</span>";
                                str += "<span>|</span>";
                                str += "<span class='prd-feature'>"+ item.params.art +"</span>";
                            }
                            else if(item.params.rebsorte !== "undefined") {
                                str += "<span class='prd-feature'>"+ item.params.rebsorte +"</span>";
                            }
                                str += "</div>";
                                str += "<div class='prd-prc'>";
                                str += "<span class='new-price'>"+ item.priceText +"";
                                str += "</span>";
                                if(item.oldPriceText !== "undefined") {
                                str += "<span class='old-price'>"+ item.oldPriceText +"";
                            }
                                str += "</span>";
                                str += "</div>";
                                if(item.params.basePrice !== "undefined")
                                str += "<div class='unit-liter-price'>"+ item.params.basePrice +"";
                                str += "</div>";
                                str += "</a>";
                                str += "</div>";
                                str += "</div>";
                                items.push(str);
                                if(items.push(str)) {
                                    $('swiper-slide').css('display','none');
                                }
                                var x = items.slice(15,30);
                                items.push(x);
                                if(items.push(x)) {
                                        $('swiper-slide').css('display','inline-block');
                                    }

未捕获类型错误：html.replace不是函数

项目1.str； var x=项目15,30； console.logx

这是有效的

---

当我这样做时，我不喜欢控制台中前15个产品的信息。但是，技巧隐藏在滑块中。

您可以共享JSON数据本身吗？那会更容易。还有，为什么你要创建两个完全相同的东西，只是起始计数器不同？既然一切都一样，我相信你可以在一个街区内完成。