How to filter data by selected value?

Question

How can the two given conditions be combined into one in the function onSelectedReport(). If write these conditions in html, it will look like this:

html:

  <div *ngFor="let report of reports">
    <div *ngFor="let i  of income">
      <div *ngIf="report.r_income_id == i.income_id">
        <div *ngFor="let c  of costs">
          <div *ngIf="i.i_costs_id == c.costs_id">
            {{c.name}}
          </div>
        </div>
       </div>
    </div>  
  </div>

But since I need to display data on a specific selected identifier, I need to implement it on ts. I have not tested it yet, but I know for 100% that it will not work as in the second condition the value of this.income.i_costs_id will determine undefined. And these two conditions should most likely be combined into one. How can do that?

ts:

  reports: Reports[]
  income: Income[]
  costs: Costs[]
  selectedReport = null
  filteredIncome = []
  filteredСosts = []

  onSelectedReport(reportId) {
    this.selectedReport = this.reports.find(
      el => {
        return el.report_id === reportId
      }
    )
    if (this.incomeService) {
      this.incomeService.fetchAll().subscribe(
        income => {
          this.income = income
          this.filteredIncome = this.income.filter(
            (income) => income.income_id == this.selectedReport.r_income_id
          )
        }
      )
    }
    if (this.costsService) {
      this.costsService.fetch().subscribe(
        costs => {
          this.costs = costs
          this.filteredСosts = this.costs.filter(
            (costs) => costs.costs_id == this.income.i_costs_id
          )
        }
      )
    }
  }

Answer 1

Try

  reports: Reports[]
  income: Income[]
  costs: Costs[]
  selectedReport = null
  filteredIncome = []
  filteredСosts = []

  onSelectedReport(reportId) {
    this.selectedReport = this.reports.find(
      el => {
        return el.report_id === reportId
      }
    )
    if (this.incomeService) {
      this.incomeService.fetchAll().subscribe(
        income => {
          this.income = income
          this.filteredIncome = this.income.filter(
            (income) => income.income_id == this.selectedReport.r_income_id
          )
          if (this.costsService) {
            this.costsService.fetch().subscribe(
              costs => {
                this.costs = costs
                for(let i of this.filteredIncome){
                  for(let c of costs){
                    if(c.costs_id==i.i_costs_id){
                      this.filteredСosts.push(c)
                    }
                  }
                }
              }
            )
          }
        }
      )
    }
  }

Answer 2

Your requirement fits to the forkJoin, I have added sample here you can modify it as per your code.

let requests = [];

if (this.incomeService) {
  //adding income service
  requests.push(this.incomeService.fetchAll());
} else {
  //adding null as we must need observable of first one
  requests.push(Observable.of(null))
}

if (this.costsService) {
  //adding cost service
  requests.push(this.costsService.fetch());
} else {
  //adding null of cost
  requests.push(Observable.of(null))
}

//requesting the requests
Observable.forkJoin(...requests)
  .subscribe(result => {
    //accessing the values
    console.log(values[0], values[1]);
    //check if values[0] is not null first so second one does not call too
    //here values[0] is first one and values[1] is costs service call
  });