遍历另一个对象数组中的多维对象

问题描述 投票:0回答:1

我有这个购物车代码,其中包含带有一堆附加食品的食物。如果选择了插件,则将其数组形式的名称和值添加到按钮的数据属性中。

点击购物车中的按钮后,产品及其附加组件便被添加到浏览器的localStorage中。

但是我想使用displayCart()函数以及父产品将addons(object array)输出到html,但是我没有那么幸运。

这是代码::

// ************************************************
// Shopping Cart API
// ************************************************

var shoppingCart = (function() {
  // =============================
  // Private methods and propeties
  // =============================
  cart = [];
  
  // Constructor
  function Item(name, price, count, addons, id) {
    this.name = name;
    this.price = price;
    this.count = count;
    this.addons = addons;
    this.id = id;
  }
  
  // Save cart
  function saveCart() {
    localStorage.setItem('shoppingCart', JSON.stringify(cart));
  }
  
    // Load cart
  function loadCart() {
    cart = JSON.parse(localStorage.getItem('shoppingCart'));
  }
  if (localStorage.getItem("shoppingCart") != null) {
    loadCart();
  }
  

  // =============================
  // Public methods and propeties
  // =============================
  var obj = {};
  
  // Add to cart
  obj.addItemToCart = function(name, price, count, addons, id) {
    for(var item in cart) {
      if(cart[item].name === name) {
        cart[item].count ++;
        saveCart();
        return;
      }
    }
    var item = new Item(name, price, count, addons, id);
    cart.push(item);
    saveCart();
  }
  // Set count from item
  obj.setCountForItem = function(name, count) {
    for(var i in cart) {
      if (cart[i].name === name) {
        cart[i].count = count;
        break;
      }
    }
  };
  // Remove item from cart
  obj.removeItemFromCart = function(name) {
      for(var item in cart) {
        if(cart[item].name === name) {
          cart[item].count --;
          if(cart[item].count === 0) {
            cart.splice(item, 1);
          }
          break;
        }
    }
    saveCart();
  }

  // Remove all items from cart
  obj.removeItemFromCartAll = function(name) {
    for(var item in cart) {
      if(cart[item].name === name) {
        cart.splice(item, 1);
        break;
      }
    }
    saveCart();
  }

  // Clear cart
  obj.clearCart = function() {
    cart = [];
    saveCart();
  }

  // Count cart 
  obj.totalCount = function() {
    var cartArray = shoppingCart.listCart();
  
      
    var totalCount = cartArray.length;
    
    return totalCount;
  }

  // Total cart
  obj.totalCart = function() {
    var totalCart = 0;
    for(var item in cart) {
      totalCart += cart[item].price * cart[item].count;
    }
    return Number(totalCart.toFixed(2));
  }

  // List cart
  obj.listCart = function() {
    var cartCopy = [];
    for(i in cart) {
      item = cart[i];
      itemCopy = {};
      for(p in item) {
        itemCopy[p] = item[p];

      }
      itemCopy.total = Number(item.price * item.count).toFixed(2);
      cartCopy.push(itemCopy)
    }
    return cartCopy;
  }

  // cart : Array
  // Item : Object/Class
  // addItemToCart : Function
  // removeItemFromCart : Function
  // removeItemFromCartAll : Function
  // clearCart : Function
  // countCart : Function
  // totalCart : Function
  // listCart : Function
  // saveCart : Function
  // loadCart : Function
  return obj;
})();


// *****************************************
// Triggers / Events
// ***************************************** 
// Add item
$('.add-to-cart').click(function(event) {
  event.preventDefault();
  var name = $(this).data('name');
  var addons = $(this).data('addons');
  var price = Number($(this).data('id'));
  var id = Number($(this).data('price'));
  var count = Number($(this).data('count'));
  shoppingCart.addItemToCart(name, price, count, addons, id);
  displayCart();
  iconCart();
});

// Clear items
$('.clear-cart').click(function() {
  shoppingCart.clearCart();
  displayCart();
  var list = document.getElementsByClassName("tinker");
  for(var i = list.length - 1; 0 <= i; i--) {
    if(list[i] && list[i].parentElement) {
      list[i].parentElement.removeChild(list[i]);
    }
  }
});


function displayCart() {
  var cartArray = shoppingCart.listCart();
  var shipping = 120;
  var output = "";
  for(var i in cartArray) {
    output += "<tr>"
      + "<td>" + cartArray[i].name + "</td>" 
      + "<td>(" + cartArray[i].price + ")</td>"
      + "<td><div class='input-group'><button class='minus-item input-group-addon btn btn-primary' data-name=" + cartArray[i].name + ">-</button>"
      + "<input type='number' class='item-count form-control' data-name='" + cartArray[i].name + "' value='" + cartArray[i].count + "'>"
      + "<button class='plus-item btn btn-primary input-group-addon' data-name=" + cartArray[i].name + ">+</button></div></td>"
      + "<td><button class='delete-item btn btn-danger' data-name=" + cartArray[i].name + ">X</button></td>"
      + " = " 
      + "<td>" + cartArray[i].total + "</td>" 
      +  "</tr>";
  }
  $('.show-cart').html(output);
  $('.PandD').html(shipping);
  $('.total-cart').html(shoppingCart.totalCart() + shipping);
  $('.total-count').html(shoppingCart.totalCount());
}

//create badge

function iconCart() {
  var cartArray = shoppingCart.listCart();
  var output = "";
  for(var a in cartArray) {
    output = "<badge class='badge badge-danger tinker' id='tinker' data-name=" + cartArray[a].name + ">"+ cartArray[a].count +"</badge>"
    if ($('.added-to-cart[data-name="' + cartArray[a].name + '" ]')) {
      $('.added-to-cart[data-name="' + cartArray[a].name + '" ]').html(output);
    }

  }
} 



// Delete item button

$('.show-cart').on("click", ".delete-item", function(event) {
  var name = $(this).data('name')
  shoppingCart.removeItemFromCartAll(name);
  displayCart();
  iconCart();
  if ($('#tinker[data-name="' + name + '" ]')) {
    var badge = $('#tinker[data-name="' + name + '" ]');
    $(badge).remove();
  }
})


// -1
$('.show-cart').on("click", ".minus-item", function(event) {
  var name = $(this).data('name')
  shoppingCart.removeItemFromCart(name);
  displayCart();
  iconCart();
})
// +1
$('.show-cart').on("click", ".plus-item", function(event) {
  var name = $(this).data('name')
  shoppingCart.addItemToCart(name);
  displayCart();
  iconCart();
})

// Item count input
$('.show-cart').on("change", ".item-count", function(event) {
   var name = $(this).data('name');
   var count = Number($(this).val());
  shoppingCart.setCountForItem(name, count);
  displayCart();
  iconCart();
});

displayCart();
iconCart();
    <script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
 
 
 <div class="row">
    <div class="col">
      <div class="card" style="width: 20rem;">
<img class="card-img-top" src="http://www.azspagirls.com/files/2010/09/orange.jpg" alt="Card image cap">
<div class="card-block">
  <h4 class="card-title">Bread</h4>
  <p class="card-text">Price: $0.5</p>

            <div id="CheckBoxList">
              <label><input type="checkbox" id='game0' value="1" name="Ketchup" data-d="b" data-in="num">Ketchup</label>
              <label><input type="checkbox" id='game1' value="2" name="Mustard" data-d="b" data-in="num">Mustard</label>
              <label><input type="checkbox" id='game2' value="3" name="Sardine" data-d="b" data-in="num">Sardine</label>
              <label><input type="checkbox" id='game3' value="4" name="Fried Eggs" data-d="b" data-in="num">Fried Eggs</label>
              <label><input type="checkbox" id='game4' value="5" name="Honey" data-d="b" data-in="num">Honey</label>
            </div>
            <h2>Orange Juice</h2>
            <div id="RadioButtonList">
              <label><input type="radio" id='pad' value="6" data-d="b" name="Orange Juice" data-in="num">Small Cup</label>
              <label><input type="radio" id='pad1' value="7" data-d="b" name="Orange Juice" data-in="num">Medium Cup</label>
              <label><input type="radio" id='pad2' value="8" data-d="b" name="Orange Juice" data-in="num">Big Cup</label>
            </div>
      
            <code id="demo"></code>
      
      
            total cost<input type="text" id="totalcost" value="">
      

            <button id="add-to-cart" data-id='1' data-name="Bread" data-addons="addons" data-addons-price="0" data-price="0.5" data-count="1" class="add-to-cart btn btn-primary">Add to cart</button>


</div>
</div>
    </div>
</div>

到目前为止,我已经可以使用功能displayCart()输出父产品。但我希望附加组件具有自己的Row?

javascript jquery arrays object multidimensional-array
1个回答
0
投票
您想使用一个带有JSON对象的渲染库,以及一些渲染HTML并为您构建视图的函数。

这些天,是React,Angular和Vue。

我是从您现在使用Knockout的地方开始的,早在那些库/框架问世之前。我仍然认为这是从您的位置到现在流行的成熟框架的良好垫脚石。

我建议进行淘汰赛在线演示/教程here。大约需要30分钟,它将改变您对这个问题的看法。

您正在解决错误的问题。这个问题已经通过使用它的库解决了很多次。您目前的问题是您不了解它们或如何使用它们。

Knockout不需要像Angular和React一样花几周的时间来学习或配置。您可以花一些时间研究淘汰赛,从而解决这个问题,不仅是解决现在的问题,而且还解决此类问题。

即使到现在,当我必须构建前端时,也要花几天的时间才能恢复使用最流行(且快速发展)的前端框架中的最新功能。但是Knockout仍然很简单,并且非常接近您的迫在眉睫的问题,我相信您可以在通过在线互动教程后将其视为解决方案-而不是另一个更大的问题,如学习React。

可能稍后再来。

© www.soinside.com 2019 - 2024. All rights reserved.