0
174
ViewsAngular filter Observable array
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[];
}
2 answers
Answer question0
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;
});
}
0
In your Service you can define <any> type or Project[] type to return the response value and same could be continue with filter. e.g. <any>res.json() or <Project[]>res.json()
and also update your class as suggested by @Sajeetharan
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(): Observable<any> {
this.projects = this.http.get('/api/projects').map((res: Response)=> <any>res.json());
}
getProjectByName(name: string) {
return this.projects.filter(proj => proj.name === name);
}
}
*always write your filters, conditions or manipulation in component not in services.