javascript - Json 项目的计数器
问题描述
我将 json 文件上传到 HTML 文件。在 html 项目中,我需要将 json 文件的产品信息加载到三个滑块中。我想在第一个滑块中获得前 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>');
}
推荐阅读
- acumatica - Acumatica 货币汇率行为
- javascript - 我的柏林噪声函数有什么问题?
- c - 燃油喷射和 tps 摩托车的慢 SD 写入
- node.js - React Native 可以使用本地文件夹作为“包名”。这叫什么?
- jackrabbit-oak - 从橡树段存储创建 TransientRepository
- javascript - 如何从 Form Extjs 6.0.2 中获取 DisplayField 的值?
- node.js - nodejs, mongodb 使用 forEach 查找并更新
- php - 更改文本以阅读更多内容和评论
- r - 如何每隔几行向我的数据框添加更多行
- c++ - 是否可以将 Lua 脚本修改为要求?