javascript - 在 javascript 中向 JSON.parse 对象添加额外的项目

Question

我正在尝试向我的 JSON 数组添加额外的项目。

我的数据从 js-cookie 返回...

var data = Cookies.getJSON('_basket');

如果我console.log(data)这就是返回的内容...

因此，如果我 console.log(data.basket) 这就是返回的内容...

我想要做的是向 basket 对象添加一个额外的项目。

如果我想将id 9和qty 3的商品添加到购物篮中。

我的console.log(data.basket)看起来像这样...

使用 javascript/jquery 将项目添加到对象的最佳方法是什么？

这是我在 a fiddle 中的完整代码。请参阅第 32 行，了解我尝试将新项目添加到 data.basket 对象的位置。在查看控制台日志之前，您必须点击添加到购物篮按钮来创建 cookie。

// document ready
(function($) {


  // product index sidebar open toggle
  $(document).on('click', '.basket-add', function(e) {

    var product_id = $(this).data('id');
    var product_qty = $('#product_qty_' + product_id).val();
    var basket = {};

    // if basket cookie exists
    if (Cookies.get('_basket')) {

      // basket cookie data
      var data = Cookies.getJSON('_basket');
      
      // if product exists in basket
      if (data.basket[product_id]) {

        console.log('product exists in basket');
        
        console.log(data.basket);

      } else {
      
      	console.log('product does not exist basket');

        // add new id to array
        console.log(data.basket);
        
        // this is where i'm trying to add an new item to data.basket
        
        /*
        
        data['basket'] = product_id
        
        data.basket[product_id] = {
          qty: product_qty
        }; 
        
        */
        
        console.log(data.basket);

      }

    } else {

      // create new basket array
      basket[product_id] = {
        qty: product_qty
      };

      // create new cookie
      Cookies.set('_basket', {
        domain: document.domain,
        basket: basket
      });

    }

    // prevent link defaults
    e.preventDefault();

  });


})(jQuery);

<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.2.1/js.cookie.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  7. Fondue Kit 39.00 <button class="basket-add" data-id="7">Add to basket</button>
  <input type="number" value="1" id="product_qty_7" />
</div>

<div>
  9. Dapper Chap 25.00 <button class="basket-add" data-id="9">Add to basket</button>
  <input type="number" value="1" id="product_qty_9" />
</div>

Answer 1

if (data.basket[product_id]) {

        console.log('product exists in basket');

        data.basket[9] = {
          qty: "3"
        };

        console.log(data.basket);

      }