來自 JSON 的數組未填充

Question

我正在嘗試將項目添加到存儲到 sessionStorage 的數組中。 add function 應該檢查數組中是否有匹配的值，如果有，則添加到該項目的計數中。 如果沒有，它應該將項目推送到數組上。

出於某種原因，這兩個函數本身工作得非常好，但是當在 if/else 語句中組合時，它要么不會將項目推送到數組中，要么會添加到計數並將副本推送到數組中。

我嘗試了兩種不同的方法。

我是 JavaScript 和 jQuery 的新手，我將不勝感激。

方法一：

$(".prodItem").on("click", ".addCart", function (e) {

cart = JSON.parse(sessionStorage.getItem('shopCart'));


let selectedProd = $(e.target).closest('.prodItem').find('.prodName').html();
console.log(selectedProd);
let selectedPrice = $(this).siblings('.price').html();
console.log(selectedPrice);
let count = 1;



$.each(cart, function (index, value) {
        if (selectedProd === value.prod) {
            value.count++;
            console.log(selectedProd);
            console.log(value.prod);
            storeCart();
            return;
        }
    });
    if ($.inArray(selectedProd, cart) !== -1) {
        // Add new product object to array
        let currentProd = new product(
            selectedProd,
            count++,
            selectedPrice);
        cart.push(currentProd);
    }

// Save array to sessionStorage
storeCart();
});

方法二：

$(".prodItem").on("click", ".addCart", function (e) {

cart = JSON.parse(sessionStorage.getItem('shopCart'));


let selectedProd = $(e.target).closest('.prodItem').find('.prodName').html();
console.log(selectedProd);
let selectedPrice = $(this).siblings('.price').html();
console.log(selectedPrice);
let count = 1;

for (let i = 0; i < cart.length; i++) {
    if (selectedProd === cart[i].prod) {
        value.count++;
        console.log(selectedProd);
        console.log(value.prod);
        storeCart();
        return;
    } else {
        let currentProd = new product(
            selectedProd,
            count++,
            selectedPrice);
        cart.push(currentProd);
    }
}
// Save array to sessionStorage
storeCart();

});

HTML：

<div class="col-4 prodimg prodItem">
      <div class="card bg-light text-white rounded-circle shadow">
        <img class="card-img rounded-circle shadow" src="images/sofas/freud-sofa-1.jpg"
          alt="Camel coloured, corduroy Freud sofa">
        <div class="card-img-overlay crdimg" id="">
          <input class="form-check-input d-none" type="checkbox" id="checkboxFreud" value="" aria-label="...">
          <label class="card-title form-check" for="checkboxFreud">
            <h3 class="prodName">Frued Sofa</h3>
          </label>
          <label class="card-text form-check" for="checkboxFreud">
            <p>This piece is the perfect fit to liven up any space.<br>A comfortable six-seater with durable
              corduroy upholstery.<br><br>R<span class="price">56 988.00</span> (incl. VAT)<i
                class="btn bi bi-cart-plus ml-4 addCart"></i></p>
          </label>
        </div>
      </div>
    </div>

**注意：空的購物車數組是在本節之前創建和存儲的。

Answer 1

如果我正確地閱讀了這些功能，並且從@Randy Casburn 的回答中背靠背，您可能想嘗試使用.text()而不是.html()來獲取價格值。 但是，如果價格元素是輸入，您可能希望使用.value()代替。

Answer 2

答案實際上很簡單，我在這里找到了它：

我在運行 $.each 語句之前聲明了 boolean ，然后在找到產品時對其進行更改。 代碼現在看起來像這樣。

$(".prodItem").on("click", ".addCart", function (e) {
cart = JSON.parse(sessionStorage.getItem('shopCart'));
cart = cart != null ? cart : [];

let selectedProd = $(e.target).closest('.prodItem').find('.prodName').text();
console.log(selectedProd);
let selectedPrice = $(this).siblings('.price').text();
console.log(selectedPrice);
let count = 1;

let currentProd = new product(
    selectedProd,
    count,
    selectedPrice);

console.log($.type(cart));

let exists = false;                   <-- declare boolean

$.each(cart, function (index, value) {
        console.log($.type(cart));
        if (selectedProd === value.prod) {
            value.count++;
            console.log(selectedProd);
            console.log(value.prod);
            exists = true;            <-- change boolean
            storeCart();
        }
    });
if(!exists) {                         <-- check boolean
    cart.push(currentProd);
}

// Save array to sessionStorage
storeCart();
});