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

inputting a pair of parameters into a function

The For loop causing crashes in the Filter button functionality

One-of-a-kind browser identification for users, no login required

What might be causing res.download to retrieve a zip file that is empty?

What is the best way to loop through a group of WebElements, and only log the results that contain a specific substring?

Having difficulty identifying duplicate sentences in Vue.js when highlighting them

Swapping out characters that are not numerical within a text input field

Troubleshooting a Problem with JSON Array in JavaScript/jQuery - Understanding Undefined Values

The function res.sendFile() seems to be unresponsive

Exploring React-Query's Search Feature

Transfer the index of a for loop to another function

I encountered an issue while attempting to manipulate/retrieve the JSON value using REGEX, resulting in an undefined return

How can two distinct sachems be returned in an http get request using res.json()?

The Response Header for JWT in Angular2 Spring Boot is not appearing

Creating a Docker image for an Angular application with Node.js

Angular 5 experiences a single catchError event for two unsuccessful http calls

Issues with the functionality of Angular 2 routerLink

What is the best way to send data from a header component to a separate container component?

What is preventing my video from filling the entire screen?

Adding options to a dropdown list dynamically within a ASP.NET Datagrid using Jquery