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

标签 javascript object

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

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

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

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

enter image description here

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

enter image description here


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

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

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

enter image description here


使用 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>

最佳答案

if (data.basket[product_id]) {

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

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

        console.log(data.basket);

      }

关于javascript - 在 javascript 中向 JSON.parse 对象添加额外的项目,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57417836/

相关文章:

javascript - 如何在 Phaser Js 中逐字或逐行输入?

javascript - 为什么 script.onload 在 Chrome 用户脚本中不起作用?

java - 程序永远找不到扫描仪

java - 使用 Android NDK 将 C++ 对象传递给 Java 的最有效方法是什么

javascript - 如何根据最新日期过滤/减少数据

java - 声明为实例变量后是否可以更改数组的大小?

javascript - 我怎样才能逐行检索文本,从 'contenteditable' 到纯 javascript 中的变量,没有 jquery

javascript - Canvas 图像消失

javascript - 在javascript中加密文件(Phonegap应用程序)

C++传递一个对象