Menu
I have an Observable array and I want to filter/find the Project by name. When I try to use the filter option it is saying
ProjectService.ts
import { Injectable } from '@angular/core'; import { Project } from "../classes/project"; import { Observable } from 'rxjs/Observable'; import 'rxjs/add/observable/of'; import { Http } from '@angular/http'; @Injectable() export class ProjectService { private projects: Observable<Project[]>; constructor(private http: Http) { this.loadFromServer(); } getProjects(): Observable<Project[]> { return this.projects; } private loadFromServer() { this.projects = this.http.get('/api/projects').map(res => res.json()); } getProjectByName(name: String) { return this.projects.filter(proj => proj.name === name); } } Project Class
export class Project { public name: String; public miniDesc: String; public description: String; public category: String[]; public images: any[]; } 
411
The Filter Operator in Angular filters the items emitted by the source Observable by using a condition (predicate). It emits only those values, which satisfies the condition and ignores the rest.
RxJS filter() operator is a filtering operator used to filter items emitted by the source observable according to the predicate function. It only emits those values that satisfy a specified predicate. The RxJS filter() operator is like the well-known Array Array . prototype.
Our app is written in Angular and display items via an item observable. The problem is we need to filter the observable based on a certain query and here’s the solution for it. Yes, it’s really that simple. Pipe the item array in the itemObservable, map each item in the array and check whether or not it matches the condition.
The Filter Operator in Angular filters the items emitted by the source Observable by using a condition (predicate). It emits only those values, which satisfies the condition and ignores the rest.
Sometimes, We want to find the length of an array to check an empty length. We have to use async for the ngIf directive to check the length of an observable array. Angular uses ngFor directives to display enumerable data. To display observables, use an async pipe with ngFor directive as seen below.
Since filter accepts an Observable, and not an array, we have to convert our array of JSON objects from data.json () to an Observable stream. This is done with mergeMap. There are many other array operations you can employ in your Observables; look for them in the RxJS API.
it should be:
getProjectByName(name: String) { return this.projects .map(projects => projects.filter(proj => proj.name === name)); } you misunderstood about filter operator. The operator using to filter data return from stream. Your stream return array of object, so you need filter array to get you needed value.
The solution above will return an array after filtered, if you wanna get only one value, using following solution
getProjectByName(name: String) { return this.projects .map(projects => { let fl = projects.filter(proj => proj.name === name); return (fl.length > 0) ? fl[0] : null; }); } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
