CODEWITHSUNDEEP
javascript
walrisus
walrisus

Reputation: 89

Updating an object within an array and it works, but a mysterious array gets added too

I'm trying to create an add to cart functionality on a personal project I'm making. The cart itself is an object with an array of products and a subtotal. It looks like this:

let cart = {
  products: [
    { prodId: 1, quantity: 1, price: 6.99 },
    { prodId: 2, quantity: 2, price: 4.99 },
    { prodId: 3, quantity: 1, price: 15.99 },
  ],
  subTotal: 32.96,
};

I'm only interested in the products right now so I did products = cart.products so that I'm just working with this:

products = [
  { prodId: 1, quantity: 1, price: 6.99 },
  { prodId: 2, quantity: 2, price: 4.99 },
  { prodId: 3, quantity: 1, price: 15.99 }
];

I have logic to check to see if the product is already in the cart, so I'm working on adding to the quantity when the user clicks 'add to cart' on an item already in the cart. The logic for that looks like this:

let productId = 3;

let oldProduct = products.filter(p => p.prodId === productId);
let index = products.indexOf(oldProduct);
if (index > -1) {
  products.slice(index, 1);
}
const updatedProduct = oldProduct.map(p => p.quantity++);
products.push(updatedProduct);

What I intend for this to do is:

  1. get the existing product out of the array and bind it to oldProduct
  2. remove the existing product out of the array completely using slice
  3. update the existing product by adding 1 to the quantity using map and binding this to updatedProduct
  4. pushing this updated product onto products

This works but an array gets added to products too. So the output in the console looks like this:

[
  { prodId: 1, quantity: 1, price: 6.99 },
  { prodId: 2, quantity: 2, price: 4.99 },
  { prodId: 3, quantity: 2, price: 15.99 },
  [ 1 ]
]

I know that the array is the added quantity. I should probably mention that in the browser a new array gets added products every time you hit the button for a product that already exists in the cart, so if you clicked the button for the 3rd item 5 times, the products array would look like this:

[
  { prodId: 1, quantity: 1, price: 6.99 },
  { prodId: 2, quantity: 2, price: 4.99 },
  { prodId: 3, quantity: 6, price: 15.99 },
  [ 1 ],
  [ 2 ],
  [ 3 ],
  [ 4 ],
  [ 5 ]
]

I think it's something to do with updatedProduct because when I logged it, it was just the array, but if it's just the array, then the quantity wouldn't go up, so I'm really confused. Also, when I check typeOf of updatedProduct it says it's an object, so I really have no idea what's happening. Any help would be greatly appreciated.

Upvotes: 1

Views: 82

Answers (2)

chad_
chad_

Reputation: 3819

I think you're way overthinking it, and you're also using filter when you meant find, and slice when you meant splice. No worries though. I think you want something like this:

let cart = {
  products: [
    { prodId: 1, quantity: 1, price: 6.99 },
    { prodId: 2, quantity: 2, price: 4.99 },
    { prodId: 3, quantity: 1, price: 15.99 },
  ],
  subTotal: 32.96,
};
let productId = 3;
cart.products.map(p => {
  if (p.prodId === productId) {
    p.quantity++;
    cart.subTotal += p.price;
  }
});
console.log(cart)

Basically, if I'm understanding, you just want to increment the quantity of a product with a given ID. All you really need to do is map a function to each product which just does 2 things: checks if the ID is matched, and increments the quantity if so. This is a great use case for short circuit conditionals. It allows you to do all that w/ just the one line. Very clean.

I edited it further and expanded that function to also add the product's price to the subtotal. Not as simple, but maybe what you need/want?

Upvotes: 1

Ayush Gupta
Ayush Gupta

Reputation: 9295

In your case,

oldProduct.map(p => p.quantity++);

returns an array containing the new quantity, which you then push into your products array.

You want to get the object with the updated quantity and push that.

Also,

  • instead of using .filter and then .indexOf, you can use .findIndex
  • I believe, given what you're trying to do, you're looking for .splice and not .slice

let products = [
  { prodId: 1, quantity: 1, price: 6.99 },
  { prodId: 2, quantity: 2, price: 4.99 },
  { prodId: 3, quantity: 1, price: 15.99 }
];

let productId = 3;

let index = products.findIndex(p => p.prodId === productId); // findIndex
if (index > -1) {
  let oldProduct = products[index]
  products.splice(index, 1); // .splice
  oldProduct.quantity++;
  products.push(oldProduct); // push the object
}


console.log(products);

Upvotes: 1

Related Questions