web-dev-qa-db-ja.com

観測可能な配列をフィルタリングする方法？

enter image description here

私のメソッドは、FirebaseからObservable配列を返します。サーバーではなくクライアントでデータをフィルターすることにしました。私の問題は、属性「attending = true」の場合にのみデータを取得することです。ヘルプやその他のアプローチは高く評価されます。どうもありがとうございました。

以下のメソッドは、firebaseリアルタイムデータベースからデータを取得します

userEvents: Observable<any[]>;

getUserEvents(uid: string) {
this.userEvents = this.db.list(this.basePatheventsSaved, ref=> 
 ref.orderByChild('uid').equalTo(uid)).snapshotChanges().map((actions) => {
  return actions.map((a) => {
    const data = a.payload.val();
    const $key = a.payload.key;
    return { $key, ...data };
  });
});
return this.userEvents;
}

以下のコードは、templaTeで使用されるデータに影響を与えるために使用されます。

 userEvents: Observable<any[]>;
 constructor(public auth: AuthService, private upSvc: FilesServiceService) { 
this.userEvents = this.upSvc.getUserEvents(this.auth.currentUserId);
 }
typescriptfirebasefirebase-realtime-databaseobservableangularfire
7
fernando nicolalde

これには、map演算子とfilter演算子をArray.prototype.filterと組み合わせて使用​​できるはずです。私があなたのデータを正しく理解していれば、次のようになるはずです：

import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/map';

userEvents: Observable<any[]>;

constructor(public auth: AuthService, private upSvc: FilesServiceService) { 
  this.userEvents = this.upSvc.getUserEvents(this.auth.currentUserId)
    .map(items => items.filter(item => item.attending))
    .filter(items => items && items.length > 0);
}

最初に、attendingがtrueである項目のみに配列をフィルタリングします。次に、空またはnullの配列をすべて除外します。

RXJS 6用に更新：

import { pipe } from 'rxjs'; 
import { map, filter } from 'rxjs/operators';

userEvents: Observable<any[]>;

constructor(public auth: AuthService, private upSvc: FilesServiceService) { 
  this.userEvents = this.upSvc.getUserEvents(this.auth.currentUserId)
    .pipe(
      map(items => items.filter(item => item.attending)),
      filter(items => items && items.length > 0)
    );
}
10
UncleDave

これにはrxjsフィルターメソッドを使用できませんが、オブザーバブルから受け取った配列オブジェクトのフィルターメソッドを使用できます。

したがって、Observable<any[]>がある場合は、次のようにフィルタリングします。

import 'rxjs/add/operator/map';

this.userEvents.map( arr =>
           arr.filter( r => r.attending === true )
     )
     .subscribe( results => console.log('Filtered results:', results))

Rxjs 5.5以降では、オブザーバブルで直接.pipeではなく.mapを使用する必要があります。

 import { map } from 'rxjs/operators';

 this.userEvents.pipe( 
         map(arr =>
           arr.filter( r => r.attending === true )
         )
     )
     .subscribe( results => console.log('Filtered results:', results))
6
Peter Salomonsen