Observable of array with filter using Angular 5 with RxJS

kumo

I'm creating a simple forum.

I'm looking to filter the posts. I have some trouble with .pipe and .filter in RxJS.

I'm trying to:

  • Retrieve the list of in-memory-api posts from api/posts, which when used with http.get it returns an Observable<Post[]>
  • Iterate through each Post in the Observable<Post[]> and filter it so it only selects, says, each post with an id of 1 (only one post with id 1 exists).
  • Log to the console any errors or if the function had success

The filter does not select each individual piece in the Post[] array, but instead selects Post[] itself.

My code:

getPosts(): Observable<Post[]> {

  // Sets the url to the service's postsUrl
  const url = this.postsUrl;

  // The http.get returns an Observable<Post[]>
  return this.http.get<Post[]>(url)
    .pipe(
      filter(
        post: Post => post.id == 1
      ),
      // Log posts were fetched
      tap(posts => console.log('Posts fetched.')),
      // Error handling
      catchError(this.handleError('getPosts', []))
    );
 }

My error:

Property 'id' does not exist on type 'Post[]'

In all examples I've looked at, the filter does not have this issue. I'm thinking it should iterate through all values in the Post[], array, so I can access it as a Post type.


Edit after answer

My final code, based on the accepted answer, looks like this:

In posts.service.ts:

getPosts(): Observable<Post[]> {

  const url = this.postsUrl;

  // Return the observable with array of Posts
  return this.http.get<Post[]>(url)
    .pipe(
      // Log posts were fetched
      tap(posts => console.log('Posts fetched.')),
      // Error handling
      catchError(this.handleError('getPosts', []))
    );

}

In posts.component.ts:

private getPosts(): void {
  this.service.getPosts()
    // Map posts to a filtered version
    .map(
      posts => posts.filter(
        post => post.from_board_id == this.from_board_id
      )
    )
    // Subscribe it
    .subscribe(
      posts => this.posts = posts
    )
  ;
}
Leandro Lima

Observables are stream of values. You are saying to RXJS that you are going to receive an stream of Post[], in other words, an Array<Post>.

If you wanna filter the array, you may do something like:

 return this.http.get<Post[]>(url).map(posts => posts.filter(post => post.id === 1))

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

rxjs6 filter Observable <Array <any >>

分類Dev

Observable rxjs filter

分類Dev

Angular / RxJS Multicasting Observable of Observable

分類Dev

filter a single value with RxJS in and return an observable and use the observable via async in a template in Angular

分類Dev

Angular2およびRxJS5 Observable.share()

分類Dev

Angular 5 / Typescript / RxJS-Observableからデータを取得します

分類Dev

How to filter an object array using checkbox with angular?

分類Dev

How to filter an array using angular js

分類Dev

In RxJS 5, is there a way to trigger an Observable before subscribing to it?

分類Dev

Clear a observable array angular

分類Dev

Angular RxJs Observable stream merge data

分類Dev

RXJS Observable Transform Array To Multiple Values

分類Dev

RxJs how to map the items in an Observable<Array>

分類Dev

Angular 5-Rxjs forkJoin

分類Dev

Angular rxjs async array undefined

分類Dev

Angular: normal array from observable

分類Dev

Filter array in angular

分類Dev

Whatever happened to `Observable.transduce` in RxJS v5+?

分類Dev

"rxjs" observable.throw is not a function - Angular4

分類Dev

"rxjs" observable.throw is not a function - Angular4

分類Dev

"rxjs" observable.throw is not a function - Angular4

分類Dev

rxJS observable to repeat call every time condition is met in Angular 2

分類Dev

searching using angular filter

分類Dev

How can i limit a Knockout foreach on an observable array to 5 at a time without using computed observables?

分類Dev

ngrx、rxjs、およびangular 5

分類Dev

Angular4およびRxJS5:Observable.concat()が予期しない動作をする

分類Dev

구독 중 Angular 5 RxJS Observable에서 NULL 결과를 확인하는 방법은 무엇입니까?

分類Dev

RxJSとangular.io:Observable <Array <T >>ここで、Tには監視可能な配列が含まれます

分類Dev

Angular 6 - Rxjs 6 - Type Observable<Object> is not assignable to type Observable<Item>

Related 関連記事

  1. 1

    rxjs6 filter Observable <Array <any >>

  2. 2

    Observable rxjs filter

  3. 3

    Angular / RxJS Multicasting Observable of Observable

  4. 4

    filter a single value with RxJS in and return an observable and use the observable via async in a template in Angular

  5. 5

    Angular2およびRxJS5 Observable.share()

  6. 6

    Angular 5 / Typescript / RxJS-Observableからデータを取得します

  7. 7

    How to filter an object array using checkbox with angular?

  8. 8

    How to filter an array using angular js

  9. 9

    In RxJS 5, is there a way to trigger an Observable before subscribing to it?

  10. 10

    Clear a observable array angular

  11. 11

    Angular RxJs Observable stream merge data

  12. 12

    RXJS Observable Transform Array To Multiple Values

  13. 13

    RxJs how to map the items in an Observable<Array>

  14. 14

    Angular 5-Rxjs forkJoin

  15. 15

    Angular rxjs async array undefined

  16. 16

    Angular: normal array from observable

  17. 17

    Filter array in angular

  18. 18

    Whatever happened to `Observable.transduce` in RxJS v5+?

  19. 19

    "rxjs" observable.throw is not a function - Angular4

  20. 20

    "rxjs" observable.throw is not a function - Angular4

  21. 21

    "rxjs" observable.throw is not a function - Angular4

  22. 22

    rxJS observable to repeat call every time condition is met in Angular 2

  23. 23

    searching using angular filter

  24. 24

    How can i limit a Knockout foreach on an observable array to 5 at a time without using computed observables?

  25. 25

    ngrx、rxjs、およびangular 5

  26. 26

    Angular4およびRxJS5:Observable.concat()が予期しない動作をする

  27. 27

    구독 중 Angular 5 RxJS Observable에서 NULL 결과를 확인하는 방법은 무엇입니까?

  28. 28

    RxJSとangular.io:Observable <Array <T >>ここで、Tには監視可能な配列が含まれます

  29. 29

    Angular 6 - Rxjs 6 - Type Observable<Object> is not assignable to type Observable<Item>

ホットタグ

アーカイブ