在 javascript 中更新数量

Question

商品已成功添加到购物车，当单击带有数据操作添加的按钮时，它成功地为数量添加了+1，但是当我单击带有删除数据操作的按钮时，它仍然为数量添加了+1，它似乎 PATCH 请求从未被初始化，但我不明白为什么。

所以目前：

数据操作添加 = +1 项目数量 数据操作添加 = +1 项目数量

我想要：

数据操作添加 = +1 项目数量 数据操作添加 = -1 到项目数量

const updateBtns = document.querySelectorAll(".update-cart");
const user = "{{request.user}}";

for (let i = 0; i < updateBtns.length; i++) {
  updateBtns[i].addEventListener("click", function () {
    event.preventDefault(); // prevent page from refreshing
    const productId = this.dataset.product;
    const action = this.dataset.action;
    console.log("productId:", productId, "action:", action);
    console.log("USER:", user);
    createCart(productId, action);
  });
}

function createCart(productId, action, cartId) {
    var csrftoken = getCookie('csrftoken');
    console.log('User is logged in, sending data...');
    fetch('/get_cart_id/')
        .then(response => response.json())
        .then(data => {
            const cartId = data.cart_id;
            console.log('Cart ID:', cartId); // log cartId in console
            
            // get the cart items for the given cart
            fetch(`/api/carts/${cartId}/items/`)
                .then(response => response.json())
                .then(data => {
                    let itemExists = false;
                    let cartItemId = null;
                    let quantity = 1;
                    
                    // check if the product is already in the cart
                    for (let i = 0; i < data.length; i++) {
                        if (data[i].product_id === parseInt(productId)) {
                            itemExists = true;
                            cartItemId = data[i].id;
                            quantity = action === 'remove' ? data[i].quantity - 1 : data[i].quantity + 1;
                            break;
                        }
                    }
                    
                    // if the item exists, update the quantity
                    if (itemExists) {
                        fetch(`/api/carts/${cartId}/items/${cartItemId}/`, {
                            method: 'PATCH',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRFToken': csrftoken
                            },
                            body: JSON.stringify({
                                quantity: quantity
                            })
                        })
                        .then(response => response.json())
                        .then(data => {
                            console.log('Item quantity updated:', data);
                        });
                    } else { // add the item to the cart
                        fetch(`/api/carts/${cartId}/items/`, {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRFToken': csrftoken
                            },
                            body: JSON.stringify({
                                product_id: productId,
                                quantity: 1
                            })
                        })
                        .then(response => response.json())
                        .then(data => {
                            console.log('Item added to cart:', data);
                        });
                    }
                });
        });
}

点击数据操作删除按钮时获取数据：

获取购物车ID/：

项目/：

项目/第二次：

Answer 1

因此，您将到达

/items

端点并获取一组没有

product_id

属性的对象。看起来您需要将 for 循环中的 if 语句更新为：

if (data[i].product.id === parseInt(productId))

，以便它可以正确设置

itemExists

。