Below is the array that I have. I am building an ionic/angular application and want to display on the screen Total which would be a sum of the Quanties in the array of objects below.
This array can have objects added to it as well as the quantities can increase/decrease... but I'm wanting to have this total reflect those changes as they happen. What would be the best way to approach this?
This one line should do it
let sum = LotsForCheckIn.map(lot => lot.Quantity).reduce((prev, curr) => prev + curr, 0);
I'm gonna assume here that you have a LotsForCheckIn as a class property in a component somewhere.
component html:
<div>
Total {{sum()}}
</div>
component ts:
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.scss"]
})
export class AppComponent {
LotsForCheckIn = [];
sum(){
this.LotsForCheckIn
.map(lot => lot.Quantity)
.reduce((prev, curr) => prev + curr, 0);
}
}
Now any change to the list would be reflected in the UI without any additional code.
You can do this:
let sum = 0;
LotsForCheckIn.foreach( (found:any) => {
if (found.Quantity != null){
sum += found.Quantity;
}
});
Write below function in your component class.
// i am assuming below are properties of the component class
totalQuantity:number;
LotsForCheckIn:any[];
calculateTotalQuantity(){
this.totalQuantity = 0;
this.LotsForCheckIn.forEach((lot:any)=>{
this.totalQuantity += lot.Quantity;
});
}
add similar to the following to the template of component class for data binding totalQuantity.
<p>Total Quantity - {{totalQuantity}},</p>
when ever the LotsForCheckIn changes call calculateTotalQuantity(). I have assigned any to the lot and LotsForCheckIn. It is better to define the interface and give that as data type.
