When working with my firestore database, I am trying to query documents and display them while also calculating the total value of a specific column (promiAmount).
I have successfully displayed the values in a mat table, but I'm struggling to calculate the sum of a particular column (promiAmount).
Despite trying various methods, I keep ending up with an undefined result. It seems like I'm missing a step somewhere, but I can't seem to figure it out.
Here is the model I am working with:
export class PromisoryModel {
customerAccountNo: string;
customerName: string;
customerNo: string;
transactionDate: string;
promiFlag:number;
promiAmount: number;
}
Actual Data from Firestore
{
"2vnLBK4qGBd4ZNbPz9aq": {
"customerAccountNo": "100-PDQ-12-17",
"customerName": "TEST, CUSTOMER 1",
"customerNo": 17,
"promiAmount": 1667,
"promiFlag": 3,
"transactionDate": "2022-02-15"
},
"CcK8Ju8ANOM561UyGPPf": {
"customerAccountNo": "100-PDQ-12-17",
"customerName": "TEST, CUSTOMER 1",
"promiAmount": 1667,
"promiFlag": "3",
"transactionDate": "2022-02-15"
},
Component TypeScript Code:
import { Component, OnInit, ViewChild } from '@angular/core';
import { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/compat/firestore';
import { Observable} from 'rxjs';
import { PromisoryModel } from 'src/app/models/promisory.model';
@Component({
selector: 'app-members',
templateUrl: './members.component.html',
styleUrls: ['./members.component.scss']
})
export class MembersComponent implements OnInit {
private PromisorryCollection : AngularFirestoreCollection<PromisoryModel>;
promissory: Observable<PromisoryModel[]>;
constructor(public afs: AngularFirestore) {}
// declarations
queryName: any;
promiList: PromisoryModel[];
getCsrBadge: any;
queryDetails() {
this.PromisorryCollection = this.afs.collection('promisory',
ref => ref
.where('customerName','==', this.queryName)
.orderBy('transactionDate','desc')
)
this.promissory = this.PromisorryCollection.valueChanges();
this.promissory.subscribe(
(data) => (this.dataPromiSource = new MatTableDataSource(data),
)
)
}
}
Attempt 1: Result is undefined
this.PromisorryCollection = this.afs.collection('promisory',
ref => ref
.where('customerName','==', this.queryName)
.orderBy('transactionDate','desc')
)
this.promissory = this.PromisorryCollection.valueChanges();
this.promissory.subscribe(
(data) => (this.dataPromiSource = new MatTableDataSource(data),
this.getCsrBadge = (data).reduce((acc, cur)=> {
return acc + cur.promiAmount
},0)
)
)
console.log(this.getCsrBadge)
Attempt 2: Result is undefined
this.PromisorryCollection = this.afs.collection('promisory',
ref => ref
.where('customerName','==', this.queryName)
.orderBy('transactionDate','desc')
)
this.promissory = this.PromisorryCollection.valueChanges();
this.promissory.subscribe(
(data) => (this.dataPromiSource = new MatTableDataSource(data),
this.promiList = (data),
this.getCsrBadge = this.promiList.reduce((acc, cur)=> {
return acc + cur.promiAmount
},0)
)
)
Attempt 3: result is undefined
this.PromisorryCollection = this.afs.collection('promisory',
ref => ref
.where('customerName','==', this.queryName)
.orderBy('transactionDate','desc')
)
this.promissory = this.PromisorryCollection.valueChanges();
this.promissory.subscribe(
(data) => (this.dataPromiSource = new MatTableDataSource(data),
this.dataPromiSource.filter = this.queryName.trim().toLowerCase(),
this.getCsrBadge = this.dataPromiSource.filteredData.map( amount => amount.promiAmount).reduce((acc,cur) => acc + cur,0)
)
)
console.log(this.getCsrBadge)
Attempt 4: result is undefined
this.PromisorryCollection = this.afs.collection('promisory',
ref => ref
.where('customerName','==', this.queryName)
.orderBy('transactionDate','desc')
)
this.promissory = this.PromisorryCollection.valueChanges();
this.promissory.subscribe(
(data) => (this.dataPromiSource = new MatTableDataSource(data),
data.filter = this.queryName.trim().toLowerCase(),
this.getCsrBadge = this.dataPromiSource.filteredData.map( amount => amount.promiAmount).reduce((acc,cur) => acc + cur,0)
)
)
console.log(this.getCsrBadge)