What is the best way to modify the quantity property of a cart item object within the framework of this Angular 13 online shopping application?

Question

What is the best way to modify the quantity property of a cart item object within the framework of this Angular 13 online shopping application?

I am currently developing an e-commerce app with a front-end built using Angular 13.

The following code snippet is designed to calculate the total price of items in the shopping cart:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: '.app-top-cart',
  templateUrl: './top-cart.component.html',
  styleUrls: ['./top-cart.component.css']
})
export class TopCartComponent implements OnInit {
  cartItems: any = [
    {
      id: 1,
      title: "iPhone 9",
      description: "An apple mobile which is nothing like apple",
      price: 549,
      discountPercentage: 12.96,
      rating: 4.69,
      stock: 94,
      brand: "Apple",
      category: "smartphones",
      thumbnail: "https://dummyjson.com/image/i/products/1/thumbnail.jpg",
      images: [
        "https://dummyjson.com/image/i/products/1/1.jpg",
        "https://dummyjson.com/image/i/products/1/2.jpg",
      ]
    },
    {
      id: 2,
      title: "iPhone X",
      description: "SIM-Free, Model A19211 6.5-inch Super Retina HD display with OLED technology A12 Bionic chip with ...",
      price: 899,
      discountPercentage: 17.94,
      rating: 4.44,
      stock: 34,
      brand: "Apple",
      category: "smartphones",
      thumbnail: "https://dummyjson.com/image/i/products/2/thumbnail.jpg",
      images: [
        "https://dummyjson.com/image/i/products/2/1.jpg",
        "https://dummyjson.com/image/i/products/2/2.jpg",
      ]
    },
    {
      id: 3,
      title: "Samsung Universe 9",
      description: "Samsung's new variant which goes beyond Galaxy to the Universe",
      price: 1248,
      discountPercentage: 15.46,
      rating: 4.09,
      stock: 36,
      brand: "Samsung",
      category: "smartphones",
      thumbnail: "https://dummyjson.com/image/i/products/3/thumbnail.jpg",
      images: [
        "https://dummyjson.com/image/i/products/3/1.jpg"
      ]
    },
  ];

  constructor() { }

  totalPrice: number = 0;

  doTotalPrice(){
    let total = 0;
    this.cartItems.forEach((item: { price: number, quantity: number }) => {
      item.quantity = 1;
      total += item.price * item.quantity
    });
    this.totalPrice = total;
  }

  ngOnInit(): void {
    this.doTotalPrice();
  }

}

The Objective

Every time a new item is added to the cartItems array, if the item already exists in the array, I want to update the quantity instead of creating a duplicate entry.

Access the Code on Stackblitz

You can view the complete code HERE.

The Predicament

I am struggling to figure out how to update the item.quantity when a product is added to the cart more than once.

Any suggestions on how to manage the quantity count?

javascript angular typescript angular13

Answer 1

Answer №1

If you want to keep track of items in a "basket", one approach is to create a Map where the item ID serves as the key.

When adding an item to the basket, first check if it already exists in the map. If not, add the item to the map with a quantity of 1. If it does exist, simply increase the quantity.

Another option is to use an array to store the items and then count the occurrences in the array at the end.

Answer 2

If you want to keep track of items in a "basket", one approach is to create a Map where the item ID serves as the key.

When adding an item to the basket, first check if it already exists in the map. If not, add the item to the map with a quantity of 1. If it does exist, simply increase the quantity.

Another option is to use an array to store the items and then count the occurrences in the array at the end.

Answer 3

Answer №2

Try a different approach by organizing available items and cart items into separate arrays. This method may provide a clearer understanding for you.


itemsAvailable = [{
  id: 1,
  title: 'iPhone 9',
  // ...
}];

itemsInCart = [];

// ...

addToCart(item) {
  this.itemsInCart.push(item);
}

// ...

get totalCost() {
  return this.itemsInCart.reduce((total, { price }) => total + price, 0);
}

Answer 4

Try a different approach by organizing available items and cart items into separate arrays. This method may provide a clearer understanding for you.


itemsAvailable = [{
  id: 1,
  title: 'iPhone 9',
  // ...
}];

itemsInCart = [];

// ...

addToCart(item) {
  this.itemsInCart.push(item);
}

// ...

get totalCost() {
  return this.itemsInCart.reduce((total, { price }) => total + price, 0);
}

What is the best way to modify the quantity property of a cart item object within the framework of this Angular 13 online shopping application?

The Objective

Access the Code on Stackblitz

The Predicament

Any suggestions on how to manage the quantity count?

Answer №1

Answer №2

Similar questions

The function cannot be called because the type does not have the appropriate signature for invoking. The specific type lacks compatible call signatures, as indicated

"Code snippets customized for React are not functioning properly in the javascriptreact.json file within Visual Studio Code

VueJS error: Trying to access properties of undefined object ('$refs') is unsuccessful

Inquiring about how to make the pieces move on the checker boards I created

Enumerate the variable values that are validated using jQuery

Utilizing the URL path name for data retrieval in Next.js 14 - A step-by-step guide

Issue encountered: Exceeded maximum call stack size while running npm start command for Angular

In Visual Studio Code, beautification feature splits HTML attributes onto separate lines, improving readability and code organization. Unfortunately, the print width setting does not apply

Utilizing Promises with Chained .then() Functions

ASP.Net & Ajax Fusion Login Interface

How can you determine if an API method call has completed in Angular and proceed to the next task?

Guide to implementing Angular 2 lazy loading with the Visual Studio 2015 ASP.NET Core Template Pack

Expand the <div> by clicking on it, then hover away to return it to its normal size

The request.body in Express.js is currently undefined

Error encountered: Unexpected token while trying to implement React + Node.js tutorial on a blog platform

Is there a way to prevent the Material UI Chip component from appearing when there is no content present?

Having difficulty resolving sub-modules using webpack

Guide on How to Retrieve the Following YouTube Video using a PHP Array

Animating sprites using TypeScript

Vuejs Countdown Timer Powered by Moment.js