Changes made to one order's information can impact the information of another order

Question

Changes made to one order's information can impact the information of another order

Currently, I am in the process of developing a unique shopping cart feature where users input a number and a corresponding product is added to a display list. Users have the ability to adjust both the price and quantity of the products, with the total price automatically updating upon modification.

The challenge I am encountering involves generating two "order" divs when I enter multiple numbers (e.g., 1234 and 2345). Each div contains information on price and quantity for user customization. However, altering the price or quantity impacts the total amount for both orders instead of just the specific one being modified, creating a cross-contamination effect between the two. How can I rectify this issue within the feature?

For reproducibility purposes, here is a link to a stackbiltz showcasing the problem (Please excuse the layout imperfections as it is a minimal sample): https://stackblitz.com/edit/angular4-nsy31g

Below is the code snippet:

component:

 // Relevant component code goes here

html:

<p>Essential calculations</p>
// HTML rendering code here

In essence, the main issues are:

1) Modifying the retail price or quantity should solely affect the respective order without influencing other items in the list.

2) The total amount must accurately reflect the combined sum of all orders present in the list.

Your assistance on mitigating these challenges would be greatly appreciated! Thank you!

javascript angular typescript

Answer 1

Answer №1

It appears that there are a few issues present. I have addressed and resolved them in the following link: https://stackblitz.com/edit/angular4-onsxlh

The specific problems include:

There is a repetition of the same object being added when a new order is appended to the orderDetails array, resulting in modifications affecting all instances:
```
this.orderDetails.push(this.order);
```

To rectify this issue, it is necessary to clone the object if you intend for this.order to remain as the default object:

this.orderDetails.push({...this.order});

By implementing this change, a cloned version of the object will be added instead of the original one.

Upon calling updateTotal, the parameter indx specifying the index of the modified order is never utilized. Instead, you seem to be altering global variables within the component indiscriminately, leading to consistent values regardless of the edited order. Furthermore, the template displays the extendedPrice variable for every item, resulting in uniform values.

To resolve this issue, ensure that you render the value of

order._extendedPrice</code to display the cost of each individual item. Additionally, within the <code>updateTotal

function, make sure to update the attributes of the current order rather than global variables:

updateTotal(retailPrice: number, number: number, indx: number) {
  const order = this.orderDetails[indx];
  order._retailPrice = retailPrice;
  order._quantity = number;
  order._extendedPrice = retailPrice * number;
  this.getTotal();
}

Lastly, the total sum of all orders is not being calculated. To address this, I have included the method getTotal, which utilizes reduce to accumulate the extended prices of each order.

Following these adjustments, the functionality should now align with expectations.

Answer 2

It appears that there are a few issues present. I have addressed and resolved them in the following link: https://stackblitz.com/edit/angular4-onsxlh

The specific problems include:

There is a repetition of the same object being added when a new order is appended to the orderDetails array, resulting in modifications affecting all instances:
```
this.orderDetails.push(this.order);
```

To rectify this issue, it is necessary to clone the object if you intend for this.order to remain as the default object:

this.orderDetails.push({...this.order});

By implementing this change, a cloned version of the object will be added instead of the original one.

Upon calling updateTotal, the parameter indx specifying the index of the modified order is never utilized. Instead, you seem to be altering global variables within the component indiscriminately, leading to consistent values regardless of the edited order. Furthermore, the template displays the extendedPrice variable for every item, resulting in uniform values.

To resolve this issue, ensure that you render the value of

order._extendedPrice</code to display the cost of each individual item. Additionally, within the <code>updateTotal

function, make sure to update the attributes of the current order rather than global variables:

updateTotal(retailPrice: number, number: number, indx: number) {
  const order = this.orderDetails[indx];
  order._retailPrice = retailPrice;
  order._quantity = number;
  order._extendedPrice = retailPrice * number;
  this.getTotal();
}

Lastly, the total sum of all orders is not being calculated. To address this, I have included the method getTotal, which utilizes reduce to accumulate the extended prices of each order.

Following these adjustments, the functionality should now align with expectations.

Changes made to one order's information can impact the information of another order

Answer №1

Similar questions

Error message: The 'node_modules' directory is not found after installing

Nested SetTimeout function fails to execute

Choosing the relevant kendo row on two different pages

Clearing the Redux state in my app upon exiting the page

The function client.guilds.find cannot be located

Creating a navigation bar that stays fixed at the top of

When working with Angular 5, the question arises: how and where to handle type conversion between form field values (typically strings) and model properties (such

TypeError: Unable to access the 'classify' property of an object that has not been defined (please save the ml5.js model first)

Excluding node modules when not included in tsconfig

React Application Issue: Unable to successfully redirect to the homepage upon logging in

The international telephone input library's "grunt img" command is malfunctioning

Presenting two arrays simultaneously creates angular duplicates

React Native ScrollView with a custom footer that adjusts its size based on the content inside (

Display data in Highchart legend only if it has values

What is the best way to update the value of a Material Angular select to match its label in TypeScript?

javascript show and hide navigation bar

I am encountering an issue with the useRef function not properly detecting visibility

Change this npm script into a gulp task

Is there a way to export a variable that has been declared within a function component in React Js?

Develop a nodejs script to make a request using a curl or similar method