How can i create a cart(dictionary function) to add and remove items in javascript

Question

I have created below code for item in javascript. What has been giving me issues is how to create a CART (array dictionary) which is to be a function on its own that will hold item name and price from the code below. This are what I am expected to do: Add item to cart and calculate all total of all item in the cart, remove item and do corresponding calculation(reduction in total price of cart) and show items from the cart.

function item(name) {
  this.price = 0;
  this.quantity = 0;
  this.total = 0;
};
item.prototype = {
  setItemPrice: function (itemPrice) {
    this.price = itemPrice;
  },
  setQuantity: function (itemUnit) {
    this.quantity = itemUnit;
  },
  itemTotal: function () {
    return this.total += this.price * this.quantity;
  }
}
bag = new item('BAG');
bag.setItemPrice(50);
bag.setQuantity(80);
bag.setQuantity(90);
bag.itemTotal();

Suggest you start with a simple array and push new items into it and then learn to use array methods to loop over the array and access individual objects. Then when you get a bit comfortable doing that you can start to build your cart function. Some helpful pointers here [access-process-nested-objects-arrays-or-json](https://stackoverflow.com/questions/11922383/access-process-nested-objects-arrays-or-json) — charlietfl, Nov 27 '17 at 00:32

score 0 · Accepted Answer · answered Nov 27 '17 at 01:20

I had a bit of time so I thought I'd tackle this.

Since the instances of item are objects it's best to just store those in an array. Arrays have a lot of useful methods that can manipulate the data to match your needs.

Let's create the cart.

// Cart is capitalised.
// It is a JS best-practice to capitalise your constructor function
// names to differentiate them from other functions
function Cart() {

  // We only need an array here
  this.items = [];

  // But this is new.
  // Returning the object allows you to chain instance methods
  // together when the object has been instantiated
  return this;
}

Cart.prototype = {

  addItem: function (item) {

    // Push a new item object into the cart array
    this.items.push(item);
    return this;
  },

  removeItem: function (name) {

    // We pass in the name of an item
    // and use filter` to filter/return all of the items *without*
    // that name (thus removing the item we don't want)
    this.items = this.items.filter(function (item) {
      return item.name !== name;
    });
  },

  showCart: function () {

    // `showCart` simply returns the array
    return this.items;
  },

  getCartTotal: function () {

    // `reduce` is another useful function and allows us
    // to use a function to return each item total
    // and add it to the accumulated total
    return this.items.reduce(function (total, item) {
      return total + (item.quantity * item.price);
    }, 0);
  }
}

I made amendments to the Item constructor too, basically adding in return this to the methods so you can do this:

const bag = new Item('BAG').setItemPrice(50).setQuantity(80);
const scarf = new Item('SCARF').setItemPrice(10).setQuantity(20);
const bead = new Item('BEAD').setItemPrice(1).setQuantity(120);
const candle = new Item('CANDLE').setItemPrice(20).setQuantity(5);

You can the other code changes here.

Create the new cart.

const cart = new Cart();

Now we can add in the items

cart.addItem(bag).addItem(scarf).addItem(bead).addItem(candle);

Get the total:

cart.getCartTotal(); // 4420

Remove the scarf item:

cart.removeItem('SCARF');

Get the new cart total:

cart.getCartTotal(); // 4220

Show the cart:

cart.showCart();

OUTPUT

[
  {"name":"BAG","price":50,"quantity":80,"total":0},
  {"name":"BEAD","price":1,"quantity":120,"total":0},
  {"name":"CANDLE","price":20,"quantity":5,"total":0}
]

and can you explain the 0 here... when i removed it, it was displaying a long string of numbers: getCartTotal: function () { return this.items.reduce(function (total, item) { return total + (item.quantity * item.price); }, 0); — Oyetoro Steven, Nov 27 '17 at 07:21
Yes, `0` is the initial value used as the accumulator. It's set to zero (instead of a string, an array, or object) because we want the sum total to be an integer. — Andy, Nov 27 '17 at 12:03
The reason why the items total in the cart is zero is because the function to sum the item totals wasn't called in this example. — Andy, Nov 27 '17 at 12:05

How can i create a cart(dictionary function) to add and remove items in javascript

1 Answers1

Linked