Angular filter Observable array

Question

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[];
}

Tiep Phan · Accepted Answer · 2017-04-15 20:15:36Z

75

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;
    });
}

answered Apr 15, 2017 at 20:15

Tiep Phan

12.6k3 gold badges40 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jochem Kuijpers Over a year ago

You can also just write a for-loop inside the map arrow function which returns the first value that satisfies the condition: .map(xs => { for (let x of xs) if (/*cond*/) return x; return null; }) etc.

Andurit Over a year ago

Very nice solution provided by @Tiep Phan, only small note. Solution above work for array with primitive types, if you want to filter objects you can do something like: tasks.filter((item) => this.tasks.map((task) => task.id).indexOf(item.id) < 0

jonrsharpe · Accepted Answer · 2017-04-15 20:43:49Z

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.

Collectives™ on Stack Overflow

Angular filter Observable array

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related