来自 JSON 的数组未填充答案

【问题标题】：Array from JSON not populating来自 JSON 的数组未填充
【发布时间】：2021-12-29 19:12:02
【问题描述】：

我正在尝试将项目添加到存储到 sessionStorage 的数组中。 add 函数应该检查数组中是否有匹配的值，如果有，则添加到该项目的计数中。如果没有，它应该将项目推送到数组上。

由于某种原因，这两个函数本身工作得非常好，但是当在 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>

**注意：空的购物车数组是在本节之前创建和存储的。

【问题讨论】：

@RandyCasburn 这是因为 .html() 返回：String - 描述：获取匹配元素集中第一个元素的 HTML 内容。
@RandyCasburn 购物车数组由 selectedProd 填充，那么苹果在这个过程中的哪个位置变成了橙色，有没有办法解决它？
@RandyCasburn 我认为您不理解这个问题，因为我的函数的这一部分运行良好，并且两个 console.logs 返回相同的值。不过感谢您的尝试。
你是对的，所以这条语句$.inArray(selectedProd, cart) - 正在查看product 对象的数组并试图找到selectedProd - selectedProd 是product 对象吗？还是您希望.isArray() 以某种方式在对象属性列表中找到一个字符串？
你有没有试过用这个方法检查数组中是否存在？它将帮助您检查数组中是否存在值。 developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

标签： javascript jquery arrays json

【解决方案1】：

如果我正确阅读了这些功能，并且想从@Randy Casburn 的答案中汲取灵感，您可能想尝试使用.text() 而不是.html() 来获取价格值。但是，如果价格元素是输入，您可能希望改用 .value()。

【讨论】：

感谢您的意见。 selectedProd === value.prod 完美运行，我的错误是当我添加 if ($.inArray(selectedProd, cart) !== -1) 时。我需要找到一种方法来检查数组中的该值，并且在我看来，如果 selectedProd === value.prod 工作正常并且我的其余代码和其他函数中的所有内容都工作正常，那么需要有一种方法来检查是否该值存在于数组中。
artDecor.js:116 Uncaught TypeError: $(...).closest(...).find(...).value is not a function at HTMLElement. (artDecor .js:116) 在 HTMLDivElement.dispatch (jquery.min.js:2) 在 HTMLDivElement.v.handle (jquery.min.js:2)

【解决方案2】：

答案其实很简单，我找到了here：

我在运行 $.each 语句之前声明了一个布尔值，然后在找到产品时更改它。代码现在看起来像这样。

$(".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();
});

【讨论】：