Increase the totalAmount by adding the product each time

Question

Increase the totalAmount by adding the product each time

Can someone help me understand why the totalAmount shows as 20 when I add a product? Also, why doesn't it increase when I try to increment it? Any insights would be appreciated.

Thank you.

ts.file

     productList = [
    { id: 1, name: 'Louis Vuis', price: 10, qtn: 1 },
    { id: 2, name: 'shubert helmet', price: 20, qtn: 1 },
  ];

  productArray: any = [];

  totalAmount: number;

  ngOnInit() {
    this.totalPrice();
  }

  add(product, idx) {
    const found = this.productArray.find(
      item => JSON.stringify(item) === JSON.stringify(product)
    );
    if (found) {
      this.productArray[idx].qtn++;
    } else {
      this.productArray.push(product);
    }
  }

  totalPrice() {
    this.productList.forEach(item => {
      this.totalAmount = (item.qtn * item.price)
      console.log(this.totalAmount);
    });
  }

https://i.stack.imgur.com/5BDYy.jpg

javascript angular typescript cart

Answer 1

Answer №1

There seems to be an issue elsewhere in the code. I believe you are on the right track.

calculateTotalPrice() {
    this.productList.forEach(item => {
      item.total = (item.quantity * item.price);
      console.log(item.total);
    });
  }

However, you are looping through the JavaScript object and assigning the value to total amount.

If you want to display the price of each item based on quantity while iterating, you should assign the value to a new key within the product object.

For example:

item.total = (item.quantity * item.price);

If you want to show the total sum of all values in totalAmount, you will need to do

this.totalAmount += (item.quantity * item.price)

Additionally, when you increment the quantity by 1, update the state and call this.calculateTotalPrice()

Answer 2

There seems to be an issue elsewhere in the code. I believe you are on the right track.

calculateTotalPrice() {
    this.productList.forEach(item => {
      item.total = (item.quantity * item.price);
      console.log(item.total);
    });
  }

However, you are looping through the JavaScript object and assigning the value to total amount.

If you want to display the price of each item based on quantity while iterating, you should assign the value to a new key within the product object.

For example:

item.total = (item.quantity * item.price);

If you want to show the total sum of all values in totalAmount, you will need to do

this.totalAmount += (item.quantity * item.price)

Additionally, when you increment the quantity by 1, update the state and call this.calculateTotalPrice()

Answer 3

Answer №2

There are a couple of issues to address:

One issue is that when you add a product, it gets added to productArray, but when calculating the totalAmount, you are actually calculating from productList. This leads to a constant totalAmount regardless of how many products are added to the productArray.
Another issue is with the line
```
this.totalAmount = (item.qtn * item.price)
```
, which simply reassigns the updated value to totalAmount instead of adding it to the previous value. To fix this, you should use
```
this.totalAmount += (item.qtn * item.price)
```
.

I have made some updates to the totalPrice method in an attempt to rectify these issues. Here is the modified code:

totalPrice() {
    this.productList.forEach(item => {
      let productIndexInProductArray = productArray.findIndex(p => p.id === item.id);
      if(productIndexInProductArray > -1) {
          this.totalAmount += (productArray[productIndexInProductArray].qtn * item.price)
          console.log(this.totalAmount);
      }
    });
  }

Answer 4

There are a couple of issues to address:

One issue is that when you add a product, it gets added to productArray, but when calculating the totalAmount, you are actually calculating from productList. This leads to a constant totalAmount regardless of how many products are added to the productArray.
Another issue is with the line
```
this.totalAmount = (item.qtn * item.price)
```
, which simply reassigns the updated value to totalAmount instead of adding it to the previous value. To fix this, you should use
```
this.totalAmount += (item.qtn * item.price)
```
.

I have made some updates to the totalPrice method in an attempt to rectify these issues. Here is the modified code:

totalPrice() {
    this.productList.forEach(item => {
      let productIndexInProductArray = productArray.findIndex(p => p.id === item.id);
      if(productIndexInProductArray > -1) {
          this.totalAmount += (productArray[productIndexInProductArray].qtn * item.price)
          console.log(this.totalAmount);
      }
    });
  }

Answer 5

Answer №3

currentTotal: number=0;
this.currentTotal += (item.quantity * item.cost)

Answer 6

currentTotal: number=0;
this.currentTotal += (item.quantity * item.cost)

Answer 7

Answer №4

Issue: The variable totalAmount is defined but not initialized. Therefore, the first step is to initialize it like so:

totalAmount: number = 0;

Another change needs to be made in the totalPrice function. Currently, every time you calculate the amount for an item, it sets that item's amount as the total amount. This results in the total amount being reset with each new item, leading to only the last item's amount being displayed in the console. To fix this, the item's amount should be added to the total amount as shown below:

totalPrice() {
  this.productList.forEach(item => {
    this.totalAmount += (item.qtn * item.price)
    console.log(this.totalAmount);
  });
}

Answer 8

Issue: The variable totalAmount is defined but not initialized. Therefore, the first step is to initialize it like so:

totalAmount: number = 0;

Another change needs to be made in the totalPrice function. Currently, every time you calculate the amount for an item, it sets that item's amount as the total amount. This results in the total amount being reset with each new item, leading to only the last item's amount being displayed in the console. To fix this, the item's amount should be added to the total amount as shown below:

totalPrice() {
  this.productList.forEach(item => {
    this.totalAmount += (item.qtn * item.price)
    console.log(this.totalAmount);
  });
}

Increase the totalAmount by adding the product each time

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

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

Issue encountered in IE9 and IE10 when loading the angular library results in the "SCRIPT5007: Object expected" error for Angular JS

Sending SMS from an Angular application to mobile devices can be achieved through several methods

Ajax request causing bootstrap success message to have shorter visibility

Creating interactive network visualizations using JavaScript

Converting Axios URL Parameter to Array of Strings in ExpressJS

A guide to incorporating dhtmlx scheduler into your Angular 4 project

Learn how to easily display Firebase data in a user-friendly HTML table with flexible columns, or seamlessly integrate it into an Angular MAT Table

Issue with Ionic toggles not updating the correct local storage entry

Exploring the basics of caching in Node.js and Express: a beginner's

AWS Lambda, where the billing time exceeds the actual processing time

When utilizing Expo, importing a module may result in returning null

Combining the inline JavaScript linting tool ESLint with the popular Airbnb configuration and Facebook

Triggering multiple onClick events in React / Material-UI when used within a data.map() loop

Customize the border width and color of a specific column in HighCharts based on dynamic data

Is there a way to automatically import all images from a folder in VUE?

Using the useRef hook in a TypeScript project to retrieve a boolean value

Is there a way to utilize AJAX to submit a request to a PHP XML-RPC server?

Why is my JSON object being mistakenly interpreted as a string literal during iteration?

The TypeScript error states that the argument type 'string | undefined' cannot be assigned to the parameter type 'string'