javascript购物车中未定义的项目

如何解决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(将#修改为@)

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


Selenium Web驱动程序和Java。元素在(x,y)点处不可单击。其他元素将获得点击?
Python-如何使用点“。” 访问字典成员?
Java 字符串是不可变的。到底是什么意思?
Java中的“ final”关键字如何工作?(我仍然可以修改对象。)
“loop:”在Java代码中。这是什么,为什么要编译?
java.lang.ClassNotFoundException:sun.jdbc.odbc.JdbcOdbcDriver发生异常。为什么?
这是用Java进行XML解析的最佳库。
Java的PriorityQueue的内置迭代器不会以任何特定顺序遍历数据结构。为什么?
如何在Java中聆听按键时移动图像。
Java“Program to an interface”。这是什么意思?
Java在半透明框架/面板/组件上重新绘画。
Java“ Class.forName()”和“ Class.forName()。newInstance()”之间有什么区别?
在此环境中不提供编译器。也许是在JRE而不是JDK上运行?
Java用相同的方法在一个类中实现两个接口。哪种接口方法被覆盖?
Java 什么是Runtime.getRuntime()。totalMemory()和freeMemory()?
java.library.path中的java.lang.UnsatisfiedLinkError否*****。dll
JavaFX“位置是必需的。” 即使在同一包装中
Java 导入两个具有相同名称的类。怎么处理?
Java 是否应该在HttpServletResponse.getOutputStream()/。getWriter()上调用.close()?
Java RegEx元字符(。)和普通点?