Rxjs filter operator not working with Angular2 Observable

Question

In this plunker I am trying to employ a filter operator on angular2 observable (Rxjs) inside class member.service.ts. The observable is fetched with an http request, which I process as follows:

  getMembers (): Observable<Member[]> {
    var one = this.http.get(this.memberUrl)
    .map( this.extractData )
    //.filter(x => x.type==='member')
   return one
 }

My question is: Why would the list not render when I uncomment the line with the filter (please view the in-memory-data.service.ts) ? In my opinion the observable is in an object state after the map operator, and does not have a type property. not sure though!.

Answer 1

Your observable is a single item that is an array. It's not an observable of the items within that array. x in your filter function: x=> x.type ==="member" is an array, so x.type doesn't exist. In order to accomplish what you want, you need to iterate over that array:

getMembers (): Observable<Member[]> {
    var one = this.http.get(this.memberUrl)
                    .map( this.extractData )
                    .map(memberArray => {
                        return memberArray.filter(x=> x.type === "member")
                    })
    return one
  }