如何检查动态数组中是否存在项目?

How to check if an item exist in a dynamic array?

提问人:Safina Siddique 提问时间:8/26/2021 更新时间:8/26/2021 访问量:737

问:

我想将 Items 添加到 cartArray。如果 Array 已经有一个项目,我将编写一个函数,通过增加其数量来防止它再次添加它。这怎么可能。数组项有多个元素(例如 id、price、quantity)。

$(document).ready(function(){

    var cartArray = []; //array of cart Items data
    var total = 0;
    var shipping = 2;

    $(".addToCart").click(function(){

               var flag = 0;
        //Get all data of item to be added
            var id= $(this).data("id");
            var price= $(this).data("price");
            var image = $(this).data('image');
            var name = $(this).data("name");
            var quantity = $(this).data("quantity");
            var availability = $(this).data("availability");
            var weight = $(this).data("weight");


            //check if cart is empty to remove empty cart view
               if( (cartArray.length === 0) ) { 
                $("#empty-cart").css("display","none");}

        //Traverse the cart list to check if item already exists or not
             for(var i = 0; i < cartArray.length; ++i){
                 if (//what to do here to match id){
                 var increment= $( this ).find(".quantity").val();
                  increment++;
                  flag = 1;
                  $( this ).find(".quantity").val(increment);
                    return false;
                   }
                 }

          //Add new Item in cart
              if(flag == 0){
                  var cartItem =  "<li class='newItem'><p class='id'>"+id+"</p><div class='picture'><img src='"+image+"' ></div> <div class='details'><p class='name'>"+name+"</p><span class='weight'>"+weight+"</span><span> /</span> <span class='avail'>"+availability+"</span><p class='price'>"+price+"</p><a type='button' class='inc'>+</a><input type='text' class='quantity' value="+quantity+" ><a type='button' class='dec'>-</a></div> <a type='button' class='removeItem'><i class='fa fa-trash'></i></a></li>"
                     cartArray.push(cartItem);
                     localStorage.setItem('cartItem',JSON.stringify(cartArray)); 
                      var getItems = JSON.parse(localStorage.getItem('cartItem'));
                     // $("#cartList").prepend(cartItem);
                    $("#cartList li .id").css('display','none');
                      console.log("Item Added")
                   //increment in badge icon number when new item added in cart
                      var counterInc = parseInt($(".badge").html()) + 1;
                        $(".badge").html(counterInc);
                 }
})
JavaScript jQuery 数组 匹配 shopping-cart

评论

0赞 Alexander Nied 8/26/2021
这里的挑战在于,您将购物车商品存储为它们在页面上呈现的 HTML 字符串。理想情况下,您将购物车内容存储为包含重要信息的对象,这将使获取和操作该信息变得更加容易。这种重构对你来说是一种选择吗?还是出于某种原因需要这种存储标记字符串的方法?
0赞 Safina Siddique 8/26/2021
我必须以这种方式做到这一点,就像我在 HTML 字符串中存储新项目一样,是否可以从本地存储中过滤项目的数据?
0赞 Alexander Nied 8/26/2021
是的,但从 HTML 字符串中做到这一点会困难得多。如果您存储了数据本身,则可以更轻松地进行过滤,并使用某种模板/工厂函数从存储的数据中呈现。要使用 HTML 字符串,您必须搜索“魔术字符串”,这不是一个可靠的解决方案,可能会导致问题,或者您必须先渲染才能获得属性;这就是为什么我想知道是否可以进行重构。
0赞 Safina Siddique 8/26/2021
如果我将数据存储在对象中,我将如何设置购物车商品的样式?
0赞 Safina Siddique 8/26/2021
每当我将 Items 添加到购物车时,我都必须动态制作一个 html DOM 元素,如果不创建 DOM 元素并仅存储数据本身,我该如何做到这一点?

答:

0赞 alexkarpen 8/26/2021 #1

编辑

在亚历山大的评论之后,您必须修改解决方案

function isInCart(id){
 var items = JSON.parse(localStorage.getItem('actualCart'));
 return !!items.filter(i=>i.id == id).length;
}
$(document).ready(function(){
    var actualCartArray = []; //array of cart Items data
    var cartArray = []; //array of cart Items html
    var total = 0;
    var shipping = 2;

    $(".addToCart").click(function(){
      if(isInCart($(this).data("id"))){
        return;
      }
               var flag = 0;
        //Get all data of item to be added
            var id= $(this).data("id");
            var price= $(this).data("price");
            var image = $(this).data('image');
            var name = $(this).data("name");
            var quantity = $(this).data("quantity");
            var availability = $(this).data("availability");
            var weight = $(this).data("weight");
           actualCartArray.push({id,price,image,name,quantity,availability,weight});

            //check if cart is empty to remove empty cart view
               if( (cartArray.length === 0) ) { 
                $("#empty-cart").css("display","none");}

        //Traverse the cart list to check if item already exists or not
             for(var i = 0; i < cartArray.length; ++i){
                 if (//what to do here to match id){
                 var increment= $( this ).find(".quantity").val();
                  increment++;
                  flag = 1;
                  $( this ).find(".quantity").val(increment);
                    return false;
                   }
                 }

          //Add new Item in cart
              if(flag == 0){
                  var cartItem =  "<li class='newItem'><p class='id'>"+id+"</p><div class='picture'><img src='"+image+"' ></div> <div class='details'><p class='name'>"+name+"</p><span class='weight'>"+weight+"</span><span> /</span> <span class='avail'>"+availability+"</span><p class='price'>"+price+"</p><a type='button' class='inc'>+</a><input type='text' class='quantity' value="+quantity+" ><a type='button' class='dec'>-</a></div> <a type='button' class='removeItem'><i class='fa fa-trash'></i></a></li>"
                     cartArray.push(cartItem);
                     localStorage.setItem('cartItem',JSON.stringify(cartArray));
localStorage.setItem('actualCart',JSON.stringify(actualCartArray));  
                      var getItems = JSON.parse(localStorage.getItem('cartItem'));
                     // $("#cartList").prepend(cartItem);
                    $("#cartList li .id").css('display','none');
                      console.log("Item Added")
                   //increment in badge icon number when new item added in cart
                      var counterInc = parseInt($(".badge").html()) + 1;
                        $(".badge").html(counterInc);
                 }
})

创建并使用函数,如下所示。如果项目是否在 localStorage 购物车中,则传递一个 id 并返回布尔值。

function isInCart(id){
 var items = JSON.parse(localStorage.getItem('cartItem'));
 return !!items.filter(i=>i.id == id).length;
}

评论

1赞 Alexander Nied 8/26/2021
如果他们将数据对象存储在数组中并将它们字符串化以存储在 localStorage 中,这将是一个很好的解决方案——但是,如果您查看下面的条件,您会看到他们存储的实际上是他们打算在 UI 中呈现的标记字符串。//Add new Item in cart