javascript - 在 javascript 中向 JSON.parse 对象添加额外的项目
问题描述
我正在尝试向我的 JSON 数组添加额外的项目。
我从 js-cookie 返回的数据...
var data = Cookies.getJSON('_basket');
如果我console.log(data)
这是返回的...
所以如果我console.log(data.basket)
这是返回的......
我想要做的是向basket
对象添加一个额外的项目。
如果我想basket
用id 9
and添加一个项目qty 3
。
我的console.log(data.basket)
会是这个样子...
使用 javascript/jquery 向对象添加项目的最佳方法是什么?
这是我的完整代码。请参阅第 32 行,了解我尝试将新项目添加到 data.basket 对象的位置。在查看控制台日志之前,您必须单击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>
解决方案
if (data.basket[product_id]) {
console.log('product exists in basket');
data.basket[9] = {
qty: "3"
};
console.log(data.basket);
}
推荐阅读
- go - 通道何时阻塞 goroutine
- python - 通过 key 中的共同值组合两个 ansible 字典
- mysql - 使 (user_id&music_id) 在 Likes 表和 Dislikes 表中唯一
- react-native - Oauth 2 密码授予流程无法与 axios 进行本机反应
- machine-learning - 有没有办法找到数据集的来源?
- html - 在可视区域中使用引导程序设计的 HTML 页面中的所有内容无需滚动
- android - 如何使 GridView 在 Kotlin 中包装其所有子视图
- multithreading - 并发访问 RTL_BITMAP 的非重叠范围
- mysql - Mysql多源复制配置问题
- r - 在R中读取多个头文件