How to Reduce upon Query when using MatTable and MatTableDataSource?

Question

I'm trying to query documents in my firestore database, display it and display a specific total of values from a column (promiAmount)

I was able to display the values in mat table however, I can't reduce its value to get the total of a specific column (promiAmount)

I tried different ways but it always end up as undefined, I'm missing a step on this somehow but I couldn't figure out.

Model:

export class PromisoryModel {
    customerAccountNo: string;
    customerName: string;
    customerNo: string;
    transactionDate: string;
    promiFlag:number;
    promiAmount: number;
}

Firestore Actual Data

{
  "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 TS 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),  
      )
   )
  }
}

Attemp 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)

Please have a look at [link1](https://stackoverflow.com/a/62186733/15803365) and [link2](https://stackoverflow.com/a/57839282/15803365). In both the examples, Object.keys(data).reduce() is used. — Priyashree Bhadra, Feb 21 '22 at 06:49
Any updates on this? Were the above links helpful and did you manage to solve your issue? — Priyashree Bhadra, Feb 24 '22 at 08:08
hi! @PriyashreeBhadra we've tried it this morning but it doesn't work however, we got an idea of order based on link 1, and for some weird reason, attempt 2 works if we reduce the data first before putting it in a mat table datasource — Carlo A, Feb 24 '22 at 08:54
That's great news! Please post the answer to this question, once you are good with the solution. Good questions needs good answers too. — Priyashree Bhadra, Feb 24 '22 at 09:07
after re-analyzing, we found out the reason, we overlooked that we're just passing our observable data / subscription to our mattable datasource only and forgot to pass it to our array for reduce, but anyhow, thanks for the great reference! — Carlo A, Feb 24 '22 at 09:34

score 1 · Accepted Answer · edited Feb 24 '22 at 15:43

After multiple trials and as per @priyashree's help of reference, Found out that we're passing an empty data to our array, (apologies for the mislook and for being newb)

in our original Attempt 2, we're just passing our subscription data / observable to our mattabledatasource only.

Attempt 2 works if we just change the order to this,

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.promiList = (data),
      this.getCsrBadge =this.promiList.reduce((acc, cur)=> {
        return acc+ cur.promiAmount
      },0),
      this.dataPromiSource = new MatTableDataSource(data))
   )

How to Reduce upon Query when using MatTable and MatTableDataSource?

1 Answers1