Angular2 apply filter inside service
<p>I am building an app with <code>Angular 2</code>. I have a <strong>service</strong>, and I am trying to <strong>filter the data</strong> before getting it from the service. I want a function where I can just <strong>ask one project element instead of the whole array</strong>.</p>

<p>This is the code I tried, but this approach doesn't work:</p>

<pre><code>getProject(id: number): Observable&lt;Project&gt; {
        return this.http.get(this.url).map(this.extractData).filter(project =&gt; (&lt;Project&gt;project).id == id).catch(this.handleError2);

    // return this.getProjects().filter(project =&gt; project.id === id);
    //return this.http.get(this.url).toPromise().then(x =&gt; x.json().data.filter(project =&gt; project.id === id)[0]).catch(this.handleError);
}

private extractData(res: Response) {
    let body = res.json();
    return body.data || { };
}

private handleError2 (error: any) {
    // In a real world app, we might use a remote logging infrastructure
    // We'd also dig deeper into the error to get a better message
    let errMsg = (error.message) ? error.message :
    error.status ? `${error.status} - ${error.statusText}` : 'Server error';
    console.error(errMsg); // log to console instead
    return Observable.throw(errMsg);
}
</code></pre>