CODEWITHSUNDEEP
javascriptjqueryhtml
LordNani
LordNani

Reputation: 65

Cannot read property 'name' of undefined. Shopping cart

I'm trying to implement a simple shopping cart with JS.

$('.addToCart').click(function(event) {
  event.preventDefault();
  var name = $(this).data('name');
  var price = Number($(this).data('price'));
  cart.addProduct(name, price, 1);
});

and here is my cart object

var cart = (function () {
  cartStorage = [];

  function Product(name, price, count) {
    this.name = name;
    this.price = price;
    this.count = count;
  }
  var object = {};
  object.addProduct = function (name, price, count) {
    for (var i in cartStorage) {
      if (cartStorage[i].name == object.name) {
        cartStorage[i].count++;
        return;
      }
    }
    var newItem = Product(name, price, count);
    console.log(newItem);
    cartStorage.push(newItem);
  }

It prints undefined when I'am trying to console log it. And if I click one more time on a button it says 'Cannot read property 'name'.

here is my typical item card block

            <div class="col-8 col-md-4 col-lg-3 card">
                <img src="https://picsum.photos/200?random=9">
                <div class="priceWrapper">
                    <input type="button" value="BUY" class = "addToCart" data-name = "Product #8" data-price = "0.001">
                    <p class="newPrice">0.001$ </p>
                    <p class="oldPrice"><strike>300$</strike></p>
                </div>
                <p class="item-name">Product #8 </p>
            </div>

Upvotes: 1

Views: 590

Answers (3)

gkd
gkd

Reputation: 863

I hope below code can give you some hints...


<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js">
  </script>

</head>

<body>

  <div class="col-8 col-md-4 col-lg-3 card">
    <img src="https://picsum.photos/200?random=9">
    <div class="priceWrapper">
      <input type="button" value="BUY" class="addToCart" data-name="Product #8" data-price="0.001">
      <p class="newPrice">0.001$ </p>
      <p class="oldPrice">
        <strike>3$</strike>
      </p>
    </div>
    <p class="item-name">Product #8 </p>
  </div>

  <div class="col-8 col-md-4 col-lg-3 card">
    <img src="https://picsum.photos/200?random=9">
    <div class="priceWrapper">
      <input type="button" value="BUY" class="addToCart" data-name="Product #9" data-price="0.002">
      <p class="newPrice">0.002$ </p>
      <p class="oldPrice">
        <strike>2$</strike>
      </p>
    </div>
    <p class="item-name">Product #8 </p>
  </div>

  <script type="text/javascript">

    var cart = (function () {

      const cartStorage = [];
      function Product(name, price, count) {
        this.name = name;
        this.price = price;
        this.count = count;
      }
      var object = {};
      object.addProduct = function (name, price, count) {
        var isProductAlredyInCart = false
        for (var i in cartStorage) {
          if (cartStorage[i].name == name) {
            cartStorage[i].count++;
            isProductAlredyInCart = true;
          }
        }
        if (!isProductAlredyInCart) {
          var newItem = new Product(name, price, count);
          cartStorage.push(newItem);
        }
        console.log(cartStorage);
      }
      return object;
    })();

    $('.addToCart').click(function (event) {
      event.preventDefault();
      var name = $(this).data('name');
      var price = Number($(this).data('price'));
      cart.addProduct(name, price, 1);
    });

  </script>

</body>

</html>

You need to return object from the cart function, suggestion from @Huỳnh Tuân is perfect.

I would personally suggest first you sharp your JS basics, like how new works ?, closures etc.

Upvotes: 0

Huỳnh Tu&#226;n
Huỳnh Tu&#226;n

Reputation: 116

Try this

var newItem = new Product(name, price, count);

Use keyword new for new object from object constructor function.

Upvotes: 1

Gibor
Gibor

Reputation: 1721

you're doing this: var object = {}, and a few lines later, this: object.name.

Of course you'll get an error... I do not know what you were trying to do, but you have to initialize that object first to access any properties on it...

And as a side not, naming a variable "object" is not a really good idea, try to give your variables more meaningful names. It would make your code more readable both to you and to other developers coming after you.

Upvotes: 0

Related Questions