【问题标题】：How to check if an item exist in a dynamic array?如何检查一个项目是否存在于动态数组中？
【发布时间】：2021-10-26 02:08:55
【问题描述】：

我想将项目添加到 cartArray。如果 Array 已经有一个 item ，我将编写一个函数，通过增加它的数量来防止它再次添加它。这怎么可能。 Array Item 有多个元素（例如 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);
                 }
})

【问题讨论】：

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

标签： javascript jquery arrays match shopping-cart

【解决方案1】：

编辑

Alexander 发表评论后，您必须修改解决方案

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;
}

【讨论】：

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