如何在购物车下拉JavaScript中只显示三个项目?

Question

我有购物车功能添加在我的电子商务网站应用程序。所以里面有一个购物车的图标。因此，当任何人点击图标下拉出现，其中显示添加的项目在购物车。因此，如果我添加了10个项目，那么下拉菜单就会变得太长而无法显示。所以我只想在那里只显示2-3个项目，并看到更多的按钮，通过用户可以重定向到购物车页面，可以看到他们添加的项目。

下面是我的脚本显示购物车项目在下拉菜单:

function displayCart(){
var cart = JSON.parse(localStorage.getItem("cart"));
var list = cart;
var orderlist = "";
if(list != null && list != 0){
for(var i = 0 ; i < list.length ; i++) {
var category = list[i].category;
var productid = list[i].productid;
var productname = list[i].productname;
var pname = productname.replaceAll(' ','-');
var quantity = list[i].quantity;
var price_with_quantity = list[i].pprice;
var image = list[i].productimage;
orderlist = orderlist + "<li class="single-shopping-cart">"
+"<div class="shopping-cart-img">"
+"<input type="hidden" id="hpid" value="+productid+">"
+"<a href='singleproduct'>" 
+"<img alt="+pname+" src="+image+"/>"
+"</a>" 
+"<span class="product-quantity">"+quantity+"x</span>"
+"</div>"
+"<div class="shopping-cart-title">"
+"<h4>"
+"<a href='WebUrl.singleproduct'>"+productname+"</a>"
+"</h4>"
+"<span>&#8377;&nbsp;"+price_with_quantity+"</span>"
+"<div class="shopping-cart-delete">"
+"<a href="#" onclick="removeitem("+productid+");"><i class="ion-android-cancel"></i></a>"
+"</div>"
+"</div>"
+"</li>";  
}
}else{
orderlist = "<li>"
+"<div id="cart_empty">No items in cart yet</div>"
+"<div id="ad_item" style="text-align: center;">Add items to your cart</div>"
+"</li>"
+"<div class="shopping-cart-btn text-center">"
+"<a class="default-btn" href="<%=WebUrl.login%>">Login</a>"
+"</div> ";
$(".shopping-cart-btn").hide();
}
document.getElementById('cartitems').innerHTML = orderlist;
}

如何在购物车下拉列表中只显示3个项目?

显示购物车的截图

Answer 1

const listLength = list.length > 2 ? 2 : list.length
for(var i = 0 ; i < listLength ; i++) {
.....
}

Answer 2

我想你可以把数组切片，得到你需要的项。

一个slice工作的例子;

const arr = [1, 2, 3, 4, 5, 6];
arr.slice(0, 3); // get items from 0th index till 3rd index (not including 3rd)