KnockoutJS: Get value of object from array

Question

I am having trouble with the "removeCartItem" function. I am trying to get the "itemTitle" so that I can send it to the server to remove the item from the customer's cart. However, "itemTitle" is showing as undefined.

JS

     $(function () {
       function CartItem() {
         var self = this;
         self.itemTitle = ko.observable();
         self.cartItemID = ko.observable();
         self.price = ko.observable();
         self.qty = ko.observable();
         self.img = ko.observable();
         self.lineTotal = ko.observable();
       }

       function viewModel(cartData) {
         var self = this;
         self.cartItems = ko.observableArray([]);
         self.addItemToCart = function (listingID, qty) {
             $.ajax({
                 url: '@Url.Action("phoneAdd","ShoppingCart",null)',
                 type: 'POST',
                 data: { 'listingID': listingID, 'requestedQty': qty },
                 success: function (data) {
                     alert(data.status);
                 }
             });
         };

         self.removeCartItem = function (CartItem) {
             alert(CartItem.price);
         };

         self.loadCartData = function () {
             $.getJSON('@Url.Action("koShoppingCartItems","ShoppingCart",null)', function (data) {

                 $.each(data, function () {
                     alert(data);
                     self.cartItems.push({
                         itemTitle: ko.observable(this.itemTitle),
                         price: ko.observable(this.Price),
                         qty: ko.observable(this.Quantity),
                         lineTotal: ko.observable(this.lineTotal)
                     });
                 });
             });
         }
         self.loadCartData();
     }
     ko.applyBindings(new viewModel());
   });

HTML

<a href='#' data-bind='click: $parent.removeCartItem'>Remove</a>

Roy J · Accepted Answer · 2015-08-22 23:12:21Z

Maybe this mockup will help you see where you're going wrong. You didn't include any HTML, so we can't see whether there's a problem with your bindings. I note that you don't actually use the CartItem constructor at the top of your code. It's a little confusing that the removeCartItem method takes a parameter with the same name; generally, initial capital letters indicate constructors.

$(function() {

  function viewModel(cartData) {
    var self = this;
    self.cartItems = ko.observableArray([]);
    self.addItemToCart = function(listingID, qty) {
      $.ajax({
        url: '@Url.Action("phoneAdd","ShoppingCart",null)',
        type: 'POST',
        data: {
          'listingID': listingID,
          'requestedQty': qty
        },
        success: function(data) {
          alert(data.status);
        }
      });
    };

    self.removeCartItem = function(CartItem) {
      alert(CartItem.itemTitle());
    };

    self.loadCartData = function() {
      //$.getJSON('@Url.Action("koShoppingCartItems","ShoppingCart",null)', function(data) {
      var data = [{
          itemTitle: 'One',
          Price: '1',
          Quantity: '1',
          lineTotal: '1'
        }, {
          itemTitle: 'Two',
          Price: '2',
          Quantity: '2',
          lineTotal: '4'
        }

      ];
      $.each(data, function() {

        //alert(data);
        self.cartItems.push({
          itemTitle: ko.observable(this.itemTitle),
          price: ko.observable(this.Price),
          qty: ko.observable(this.Quantity),
          lineTotal: ko.observable(this.lineTotal)
        });
      });

      //});
    }

    self.loadCartData();
  }

  ko.applyBindings(new viewModel());

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div data-bind="foreach:cartItems">
  <span data-bind="text:itemTitle"></span>
  <button data-bind="click:$root.removeCartItem">Remove</button>
</div>

Collectives™ on Stack Overflow

KnockoutJS: Get value of object from array

JS

HTML

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

JS

HTML

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related