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

Question

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

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

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

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

所以，如果我console.log(data.basket)会返回...

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

如果我想使用basket和id 9向qty 3添加项目。

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

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

这是我在a fiddle中的完整代码。关于将新项目添加到data.basket对象的位置，请参见第32行。在查看控制台日志之前，您必须单击Add to 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);

      }