Filtering Results of Observable Before Subscribing in Angular App

Question

I have a situation where I'm using Output() and EventEmitter() to pass down an event in my Angular app from one component to another. I'm actually passing this event down twice - because three components are involved.

Then, when the event is received from the component that needs to respond, I am using this function:

optionReceived(option, page) {
    console.log('Consulting page # is: ' + option.toolbarLabel);
    if (option.toolbarLabel && option.toolbarLabel === 'OT') {
        this.clientService.getByStage('consulting', 1, this.pagesize)
            .subscribe(resRecordsData => {
                this.records = resRecordsData;
                this.page = page;
                console.log(this.records);
            },
            responseRecordsError => this.errorMsg = responseRecordsError);
        }
}

This works as expected. However, what I really want to be able to here is filter these results based on the parameter that is passed in via the click event that's been handled by the Output() and EventEmitter(). So, all that is to say, really I want to have the exact same function as above, but with a filter applied, so it looks like this:

optionReceived(option, page) {
    console.log('Consulting page # is: ' + option.toolbarLabel);
    if (option.toolbarLabel && option.toolbarLabel === 'OT') {
        this.clientService.getByStage('consulting', 1, this.pagesize)
            .filter(resRecordsData => resRecordsData.type && resRecordsData.type === 'OT')
            .subscribe(resRecordsData => {
                this.records = resRecordsData;
                this.page = page;
                console.log(this.records);
            },
            responseRecordsError => this.errorMsg = responseRecordsError);
        }
}

Right now this is not working. When this function is triggered I get the console.log I would expect from above, but new results are not generated. I don't get an error - it's just that the data doesn't change based on the filter.

What's the issue here? Without any errors it's difficult to know where the issue lies.

By the way, my imports look like this:

import { Http } from '@angular/http';
import { ClientService } from '../../../data/client.service';
import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/filter';

Answer 1

The problem is that you are using rxjs filter as you would have used it in javascript.

Filter in this case just unwraps the observable and stop the stream if a certain condition fails, it will not iterate over each item in your array unless you intruct it to.

To filter your array prior to subscription use the map operator:

.map(resRecordsData => {
  let data = resRecordsData.data.filter(item => item.gender && item.gender === 'male');
  resRecordsData['data'] = data;
  resRecordsData['count'] = data.length;
  return resRecordsData
})

Also do not forget to import it:

import 'rxjs/add/operator/map';