在RxJS中使用过滤运算符

Question

Update: I altered the votes node of the database. It didn't seem to make sense the way I had it structured.

This is my database structure:

-threadsMeta
    -posts
        -postId


-votes
    -threadId
        -postId
            -uid: "down" //or "up"

The comments in the below code, I think, describe the intended behavior versus the actual behavior.

getMyUpVotes(threadId: string, uid: string): Observable<any> {
    //Get all the postId's for this thread
    let myUpVotes = this.af.database.list(`threadsMeta/${threadId}/posts`)
    .map(posts => {
        //Put each postId into a Firebase query path along with the uid from the method's params
        posts.forEach(post => {
            this.af.database.object(`votes/${threadId}/${post.$key}/upVotes/${uid}`)
            //Emit only upvotes from this user on this post
            .filter(data => data.$value === true)
        })
    })
    myUpVotes.subscribe(data => console.log(data)) //Undefined
    return myUpVotes
}

Answer 1

The following method would return the array of posts with an upvote + for the given thread + for the given user:

getMyUpVotes(threadId: string, uid: string): Observable<any> {
  return this.af.database.list(`threadsMeta/${threadId}/posts`).take(1)
    // Flatten the posts array to emit each post individually.
    .mergeMap(val => val)
    // Fetch the upvotes for the current user on the current post.
    .mergeMap(post =>
      this.af.database.object(`votes/${threadId}/${post.$key}/upVotes/${uid}`).take(1)
        // Only keep actual upvotes
        .filter(upvote => upvote.$value === true)
        // Convert the upvote to a post, since this is the final value to emit.
        .map(upvote => post)
    )
    // Gather all posts in a single array.
    .toArray();
}

I've added the .take(1) to force Firebase observables to complete so that the final results can be collected with toArray() . That also means that once you have fetched the upvotes, you stop watching for future value changes. Let me know if this is a problem.

IMPORTANT. You should subscribe to the observable from OUTSIDE of your method.

I have created a runnable version to illustrate (note that I'm using plain observables as neither Angular nor Firebase are available in this environment):

 const getPostsForThread = (threadId) => { return Rx.Observable.of([ { key: 'jcormtp', title: 'Some post', threadId: threadId }, { key: 'qapod', title: 'Another post', threadId: threadId }, { key: 'bvxspo', title: 'Yet another post', threadId: threadId } ]); } const getUpvotesPerPostPerUser = (postId, uid) => { return Rx.Observable.from([ { postId: 'jcormtp', uid: 'bar', value: true }, { postId: 'qapod', uid: 'bar', value: false }, { postId: 'bvxspo', uid: 'bar', value: true } ]).filter(uv => uv.postId == postId && uv.uid == uid); } const getMyUpVotes = (threadId: string, uid: string): Rx.Observable<any> => { return getPostsForThread(threadId) // Flatten the posts array to emit each post individually. .mergeMap(val => val) // Fetch the upvotes for the current user on the current post. .mergeMap(post => getUpvotesPerPostPerUser(post.key, uid) // Only keep actual upvotes .filter(upvote => upvote.value === true) // Convert the upvote to a post, since this is the final value to emit .map(upvote => post) ) // Gather all posts in a single array .toArray(); } // NB. subscribe() outside of the method getMyUpVotes('foo', 'bar') .subscribe(val => console.log(val)); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.0.1/Rx.min.js"></script> 

Answer 2

I think you want:

let myUpVotes = this.af.database.list(`threadsMeta/${threadId}/posts`)
    .flatMap(posts => 
          Observable.from(posts)
              .flatMap(post=>this.af.database.object(
                   `votes/${threadId}/${post.$key}/upVotes/${uid}`));
myUpVotes = myUpVotes.flatMap(t=>t.filter(x=>x.uid === true));

Answer 3

So I did come up with a solution that suited my particular situation well. I just don't know enough about observables to know whether it might be the best way to do this. Anyway, I ended up 'joining' the query with my posts query. This works well for my particular situation because I'm rendering the posts with ngFor . I'm able to check whether the current user has upvoted/downvoted the specific post with this:

<i [class.voted]="post.vote === 'down'" class="fa fa-caret-down" aria-hidden="true"></i>

Here's how I'm getting the data:

getPosts(threadId: string, uid: string): Observable<any> {
    let result = this.af.database.list(`/threads/${threadId}/posts`)
    .switchMap(posts => {
        let joinedObservables: any[] = [];
        posts.forEach(post => {
            joinedObservables.push(this.af.database
                .object(`votes/${threadId}/${post.$key}/${uid}`)
                .do(value => {
                    post.vote = value.$value
                })
            )
        })
        return Observable.combineLatest(joinedObservables, () => posts);

    });
    return result
}

In this implementation I keep getting the emissions from the votes, which is important, as user votes have to be reflected on the page not just on load but if they change their votes.

I'd like to know whether anyone foresees any issues with this. I'm not at all good with this technology, and I wonder if I'm missing anything. I'll give the others who have answered the opportunity to voice any objections and to edit their own answers if they want before choosing this as the answer.