Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular 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

enter image description here

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[]; } 
like image 411
Madhan Avatar asked Apr 15 '17 20:04

Madhan


People also ask

How to Filter data from Observable in Angular?

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.

What is filter in RxJS?

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.

How to filter an observable based on a query in angular?

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.

What is the use of FILTER operator in angular?

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.

How to find the length of an observable array in angular?

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.

How do I convert a JSON array to an observable?

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.


1 Answers

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;     }); } 
like image 86
Tiep Phan Avatar answered Oct 14 '22 00:10

Tiep Phan