如何解决javascript购物车中未定义的项目
我正在尝试在本地主机服务器上运行的纯 JS 购物车中添加项目。本地服务器与节点一起运行,我使用 XMLHttpRequest 来访问数据(也许使用 fetch 可能会更好,但它实际上是这样运行的)。
我可以从本地服务器数据中毫无问题地生成页面,除了 addToCart 函数外,一切正常:
var ShoppingCart = (function() {
"use strict";
// Cahce necesarry DOM Elements
var productsEl = document.querySelector(".products"),cartEl = document.querySelector(".shopping-cart-list"),productQuantityEl = document.querySelector(".product-quantity"),emptyCartEl = document.querySelector(".empty-cart-btn"),cartCheckoutEl = document.querySelector(".cart-checkout"),totalPriceEl = document.querySelector(".total-price");
var products = [],productsInCart = [];
var getData = function() {
var data = new XMLHttpRequest();
data.open("GET","http://localhost:3000/api/teddies/",true);
data.onload = function() {
if(data.status >= 200 && data.status < 400) {
products = JSON.parse(data.responseText);
generateProductList();
} else {
alert("Could not get the data!");
}
}
data.onerror = function() {
alert("Error in communication with server!");
}
data.send();
}
var setupListeners = function() {
productsEl.addEventListener("click",addProductCallback);
emptyCartEl.addEventListener("click",emptyCartCallback);
}
var addProductCallback = function(event) {
var el = event.target;
if(el.classList.contains("add-to-cart")) {
var elId = el.dataset.id;
addToCart(elId);
}
}
var emptyCartCallback = function(event) {
if(confirm("Are you sure?")) {
productsInCart = [];
}
generateCartList();
}
// Pretty much self explanatory function. NOTE: Here I have used template strings (ES6 Feature)
var generateProductList = function() {
products.forEach(function(item) {
var productEl = document.createElement("div");
productEl.className = "product";
productEl.innerHTML = (`<div class="product-image">
<img src="${item.imageUrl}" alt="${item.name}">
</div>
<div class="product-name"><span>Product:</span> ${item.name}</div>
<div class="product-description"><span>Description:</span> ${item.description}</div>
<div class="product-price"><span>Price:</span> ${item.price} $</div>
<div class="product-add-to-cart">
<a href="#0" class="button see-more">More Details</a>
<a href="#0" class="button add-to-cart" data-id=${item.id}>Add to Cart</a>
</div>
</div>`);
productsEl.appendChild(productEl);
});
}
// Adds new items or updates existing one in productsInCart array
var addToCart = function(id) {
var obj = products[id];
if(productsInCart.length === 0 || productFound(obj.id) === undefined) {
productsInCart.push({product: obj,quantity: 1});
} else {
productsInCart.forEach(function(item) {
if(item.product.id === obj.id) {
item.quantity++;
}
});
}
generateCartList();
}
var productFound = function(productId) {
return productsInCart.find(function(item) {
return item.product.id === productId;
});
}
// Like one before and I have also used ES6 template strings
var generateCartList = function() {
cartEl.innerHTML = "";
productsInCart.forEach(function(item) {
var li = document.createElement("li");
li.innerHTML = `${item.quantity} ${item.product.name} - $${item.product.price * item.quantity}`;
cartEl.appendChild(li);
});
productQuantityEl.innerHTML = productsInCart.length;
generateCartButtons()
}
// Function that generates Empty Cart and Checkout buttons based on condition that checks if productsInCart array is empty
var generateCartButtons = function() {
if(productsInCart.length > 0) {
emptyCartEl.style.display = "block";
cartCheckoutEl.style.display = "block"
totalPriceEl.innerHTML = "$ " + calculateTotalPrice();
} else {
emptyCartEl.style.display = "none";
cartCheckoutEl.style.display = "none";
}
}
var calculateTotalPrice = function() {
return productsInCart.reduce(function(total,item) {
return total + (item.product.price * item.quantity);
},0);
}
// This functon starts the whole application
var init = function() {
getData();
setupListeners();
}
// Exposes just init function to public,everything else is private
return {
init: init
};
})();
ShoppingCart.init();
还有错误信息:
Uncaught TypeError: item.product is undefined
generateCartList http://127.0.0.1:5500/js/app2.js:105
generateCartList http://127.0.0.1:5500/js/app2.js:103
addToCart http://127.0.0.1:5500/js/app2.js:89
addProductCallback http://127.0.0.1:5500/js/app2.js:45
setupListeners http://127.0.0.1:5500/js/app2.js:36
init http://127.0.0.1:5500/js/app2.js:135
<anonymous> http://127.0.0.1:5500/js/app2.js:145
我真的是编码新手,如果解决方案看起来很明显,我很抱歉。
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com(将#修改为@)