Using pipe operator in function which returns Observable

Question

I have a function which returns Observable but I want to pipe this Observable and apply filter function and interval to emit one Person each 2 seconds. Can anyone tell me how excatly pipe operator works in this case?

PersonService.ts

 constructor() {
    this.initPersonArray();
  }

  init(): Observable<Person> {
    return Observable.create(obs => {
      this.persons.forEach(el => {
        obs.next(el);
      });
    });
  }

  initPersonArray(): Person[] {
    this.persons.push(
      new Person('Michal', 'Kowlaski', 24, new Array('plywanie', 'pilka nozna'), Sex.MALE),
      new Person('Stefan', 'Kowlaski', 20, new Array('plywanie', 'pilka nozna'), Sex.MALE),
      new Person('Jacek', 'Kowlaski', 54, new Array('plywanie', 'pilka nozna'), Sex.MALE),
      new Person('Małgorzata', 'Kowlaski', 52, new Array('plywanie', 'pilka nozna'), Sex.FEMALE),
      new Person('Katarzyna', 'Kowlaski', 84, new Array('plywanie', 'pilka nozna'), Sex.FEMALE),
      new Person('Jan', 'Kowlaski', 86, new Array('plywanie', 'pilka nozna'), Sex.MALE),
    );
    return this.persons;
  }

Then in component I call this function by

  ngOnInit(): void {
    this.personService.init().subscribe(res => {
      console.log('----->', res);
    });
  }

And what's the problem? this.personService.init().pipe(filter(...)). interval is not an filter, it's function that returns and Observable. Maybe you want delay instead? — martin
– martin, Commented Mar 25, 2018 at 10:02
Yes but when I want to filter persons which age is > 26 it says that it can’t read property age — Jan Testowy
– Jan Testowy, Commented Mar 25, 2018 at 10:04

Tomasz Kula · Accepted Answer · 2018-04-06 13:52:54Z

1

Simplilfied example:

ts file

import { Component } from '@angular/core';
import { interval } from 'rxjs/observable/interval';
import { map, filter, take } from 'rxjs/operators'
import { Observable } from 'rxjs/Observable';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  person$: Observable<string>;

  people = [
    'Tomasz',
    'Piotr',
    'Anna',
    'Magda',
  ]

  ngOnInit() {
    this.person$ = interval(2000).pipe(
      take(this.people.length),
      map((i) => this.people[i]),
      filter(person => // ... filter by person prop)
    )
  }
}

html file

<div> {{ person$ | async }} </div>

Live example

edited Apr 6, 2018 at 13:52

answered Mar 25, 2018 at 10:04

Tomasz Kula

16.9k3 gold badges71 silver badges82 bronze badges

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

7 Comments

Jan Testowy Over a year ago

But how can you filter people by the property which is inside the object?

Tomasz Kula Over a year ago

just add another filter after the map, i updated my answer

Jan Testowy Over a year ago

One more question - this will produce the whole array each 1sec yes? What about producing each person from that array with 1 sec interval?

Tomasz Kula Over a year ago

It will emit one person, every two seconds up to the this.people array length. What exactly are you trying achieve? I can give you a more detailed example if you provide more details.

Tomasz Kula Over a year ago

@JanTestowy if my solution solved your problem, please consider accepting the answer.

|

Collectives™ on Stack Overflow

Using pipe operator in function which returns Observable

1 Answer 1

7 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Related