Well. I've got some async code in my Angular component, that works just fine. Looks like this (briefly):
export class SomeComponent {
    user: User;
    /* ... */
    email: string;
    /* ... */
    private someMethod(): void {
      /* some code here */
      this.userService1.getUsers().subscribe(users => {
        users.forEach(user => {
          if (user.email && user.email === this.email) {
             this.userService2.getUser(user.id).subscribe(foundUser => {
               let someFields;
               if (foundUser) {
                 someFields = (({ field1, field2 }) => ({ field1, field2 }))(foundUser); 
               }
               this.user = {...user, ...someFields};
             });
           }
         });
      });
      /*some code here */              
    }
 }
I skip some types and name variables a bit awkward (but simple) cause it's not the point. Code works. But I wanna encapsulate process of user's constructing (from 2 services) cause I'll need it in different components. I tried, but...
constructUser(email): Observable<IUser> {
  let finalUser: IUser;
  return this.userService1.getUsers().merge(users => {
    return users.filter(user => {
      if (user.email && user.email === email) {
        return this.userService2.getUser(user.id).map(foundUser => {
          let someFields;
          if (foundUser) {
            someFields = (({ field1, field2 }) => ({ field1, field2 }))(foundUser); 
          }
          finalUser =  {...user, ...someFields};
          return Observable.of(finalUser);
        });
      }
    });
  });
}
My WebStorm shows no error. But in console I'm getting this.userService1.getUsers(...).merge is not a function.
I've tried merge, concat, flatMap, whatever - but still no success. The only difference was errors that I've got. I do not have much experience with rxjs, so I'm stuck. Any help or tips will be greatly appreciated.
UPD.
Solved, but for 7 days (while bounty is active) anyone still welcome with more concise and functional solutions :)
I think something like this is what you want:
RxJs 5:
import 'switchMap' from 'rxjs/add/operator/switchMap';
import 'map' from 'rxjs/add/operator/map';
this.userService1.getUsers()
    .map(users => users.find(userInList => userInList.email === "SomeEmail")) //Map the observable with users to a single user
    .switchMap(user => this.userService2.getUser(user.id)) //Map the observable by an other observable
    .subscribe(...doSomething with the result)
RxJs 6:
import {map, switchMap} from 'rxjs/operators';
this.userService1.getUsers().pipe(
    map(users => users.find(userInList => userInList.email === "SomeEmail")), //Map the observable with users to a single user
    switchMap(user => this.userService2.getUser(user.id)) //Map the observable by an other observable
).subscribe(...doSomething with the result)
                        If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With