How to Sum up the values of 5 diff columns as TOTAL using *ngONinit?

Question

i am having an array of Product with fields name ID,Brand,Price,QtySold,Value where value=Price*qtySold and at the end i need to show Number of Items,Total quantity sold and total sales value

 @Component
({
 selector: 'my-app',
 templateUrl: './app.component.html',
 styleUrls: [ './app.component.css' ]
 }`
export class AppComponent{
allProduct:Product[]=[
{Id:'P104', Brand:'Pepsi',Price:4,qtySold:22},
{Id:'C124', Brand:'Coke',Price:4,qtySold:26},
{Id:'M155', Brand:'Maggie',Price:6,qtySold:10},
{Id:'DM241', Brand:'Cadburys',Price:10,qtySold:15},
{Id:'5S118', Brand:'5 Star',Price:8,qtySold:8},
];

Need to display the Number of Products,Sum of Quantity sold and sum of Sales Value

need to do this using *ngOninit.. – Aman Solanki Feb 14 '19 at 18:02 — Aman Solanki, Feb 14 '19 at 18:02

Sajeetharan · Accepted Answer · 2019-02-14T18:35:19.613

3

You will need something like below within your ngOninit

let products = [
  {
    "Id": "P104",
    "Brand": "Pepsi",
    "Price": 4,
    "qtySold": 22
  },
  {
    "Id": "C124",
    "Brand": "Coke",
    "Price": 4,
    "qtySold": 26
  },
  {
    "Id": "M155",
    "Brand": "Maggie",
    "Price": 6,
    "qtySold": 10
  },
  {
    "Id": "DM241",
    "Brand": "Cadburys",
    "Price": 10,
    "qtySold": 15
  },
  {
    "Id": "5S118",
    "Brand": "5 Star",
    "Price": 8,
    "qtySold": 8
  }
];

let productsCount = products.length;
let qtySold = products.reduce((a, b) => +a + +b.qtySold, 0);
let sales = products.reduce((a, b) => +a + +b.Price, 0);

console.log(productsCount);
console.log(qtySold);
console.log(sales);

STACKBLITZ DEMO

edited Feb 14 '19 at 18:35

answered Feb 14 '19 at 18:12

Sajeetharan

216,225
63
350
396

need to write this in component.ts right?? i am writing in it but it is showing Unexpected Token. i am writing it just below my codes given above. – Aman Solanki Feb 14 '19 at 18:22
you might not need to use let – Sajeetharan Feb 14 '19 at 18:26
can you just make it simple for me by writing the code including *ngOninit beacuse m having issue in writing it..i am facing the same problem since today morning..can you pelase help me with it.. – Aman Solanki Feb 14 '19 at 18:30
hey can you give me an another method rather than reduce to sum up these elements – Aman Solanki Feb 16 '19 at 05:55
what is the simple way to add them by running a for loop..by not using this terms like reduce,sumBy forEach..just the basic method – Aman Solanki Feb 16 '19 at 06:30
https://stackoverflow.com/questions/30756835/sum-all-properties-in-object – Sajeetharan Feb 16 '19 at 06:31
https://stackblitz.com/edit/angular-xw1f8b?file=src%2Fapp%2Fapp.component.ts i did it in the simplest way – Aman Solanki Feb 16 '19 at 06:43
i need to display names from an array list having two different CSS style in angular how can i do that?Like if it is Bob it should be green and if Steve it should be Red – Aman Solanki Feb 18 '19 at 07:23

score 1 · Answer 2 · answered Feb 14 '19 at 18:15

Either simple reduce like @Sajeetharan posted or using some util library like lodash:

this.numberOfProducts = allProduct.length;
this.sumQtySold = _.sumBy(allProduct, product => product.qtySold);
this.sales = _.sumBy(allProduct, product => product.qtySold * product.price);

Hunter Gemmer · Answer 3 · 2019-02-14T18:33:10.460

Another way to accomplish this:

const beverageSales = [
  {
    "Id": "P104",
    "Brand": "Pepsi",
    "Price": 4,
    "qtySold": 22
  },
  {
    "Id": "C124",
    "Brand": "Coke",
    "Price": 4,
    "qtySold": 26
  },
  {
    "Id": "M155",
    "Brand": "Maggie",
    "Price": 6,
    "qtySold": 10
  },
  {
    "Id": "DM241",
    "Brand": "Cadburys",
    "Price": 10,
    "qtySold": 15
  },
  {
    "Id": "5S118",
    "Brand": "5 Star",
    "Price": 8,
    "qtySold": 8
  }
];

let itemsSold = 0;
let quantitySold = 0;
let netSales = 0;

beverageSales.forEach(sale => {
  itemsSold += 1;
  quantitySold += sale.qtySold;
  netSales += sale.Price * sale.qtySold;
});

console.log('items sold', itemsSold);
console.log('quantity sold', quantitySold);
console.log('net sales', netSales);

Aman Solanki · Answer 4 · 2019-02-16T09:48:27.993

0

productCount : number=0;
quantitySold : number=0;
sales : number=0;
sold : number=0;
ngOnInit(){
for(let temp of this.allProduct){
this.productCount += 1;
this.quantitySold += temp.qtySold;
this.sales += temp.Price * temp.qtySold;
if(temp.qtySold>0){
this.sold += 1;
}}}

The above code worked for me.It has been used to sum up the values just by using Loops and no other terminologies.

edited Feb 16 '19 at 09:48

answered Feb 16 '19 at 06:48

Aman Solanki

63
1
9

1

Please use the edit link on your question to add additional information. The Post Answer button should be used only for complete answers to the question. - [From Review](/review/low-quality-posts/22222942) – Mark Rotteveel Feb 16 '19 at 09:15
No.! this the Soluntion i have posted for my Question as i got the solution. – Aman Solanki Feb 16 '19 at 09:30
Then please add an explanation, just dumping code doesn't make a good answer. – Mark Rotteveel Feb 16 '19 at 09:46

How to Sum up the values of 5 diff columns as TOTAL using *ngONinit?

4 Answers4