SOLVED - When running 2 observables one after another - getting result based on the first one

Question

I have 2 functions that return Observables that I would like to execute one after another. function1 return

Observable<SomeDataObject>

and function2 return type

Observable<Any>

I want that the function that execute them return boolean based of the result of function1. I was managed to do so when running first function1, but now I would like to run function2 first, and I get the error:

"Argument of type '(res: <SomeDataObject>) => boolean' is not assignable to 
 parameter of type '(value:SomeDataObject, index: number) => 
ObservableInput<any>. Type 'boolean' is not assignable to type 
ObservableInput<SomeDataObject>

See my code: This works:

return this.someService.function1().pipe(
  switchMap(f1Result => 
  {
     this.someService.repositpry.f1ResultData = f1Result;
     return this.someService.function2().pipe(
        map(res => 
       {
           if (res) return true;
           else return false;
       }));
   })
 )

This fails:

 return this.someService.function2.pipe( 
  switchMap(f2Result => 
  {
      this.someService.function1().pipe(
       map(f1result => 
       {
           this.someService.repositpry.f1ResultData = f1Result;
       })
    );
    if (f2Result) return true
    else return false;
 }));

Solution:

return this.someService.function2().pipe( 
  switchMap(f2Result => 
  {
      return this.someService.function1().pipe(
       map((f1result) => 
       {
           this.someService.repositpry.f1ResultData = f1Result;
           if (f2Result) return true
           else return false;
       })
    );

 }));

This may not be a switchmap issue but rather a type issue, make sure you are using correct types according to the interfaces you have. — Ramesh Reddy, Mar 04 '20 at 09:42
@Ramesh - I've edited it - the types were included in the original question but were removed where not in a code block — Guy E, Mar 04 '20 at 09:49
where is this `(value:SomeDataObject, index: number) => ObservableInput` coming from? looks like you are expecting two arguments but sending only one. — Ramesh Reddy, Mar 04 '20 at 09:52
@Ramesh - switchMap(f2Result => is marked as problematic and this is the error when hovering it. — Guy E, Mar 04 '20 at 10:40
You just wasted time from several people by making typos in your question and not showing essential parts of the code. I know you [don't agree](https://stackoverflow.com/questions/60522797/solved-when-running-2-observables-one-after-another-getting-result-based-on/60523237#comment107073246_60523237) but stackoverflow is not here to help you debug your code. And if you don't even copy paste the code correctly you need to work on your question quality. — Wilt, Mar 04 '20 at 16:31
And adding an answer to your question is also bad practice by the way. Would be also smart to "fix" the typos in the question, since the code from the answer is currently not matching your question. — Wilt, Mar 04 '20 at 16:34

score 1 · Answer 1 · answered Mar 04 '20 at 09:51

1

You should seriously work on your question. Also read this: https://stackoverflow.com/help/how-to-ask

You do:

this.someService.function2.pipe(
  //...
)

Should it not be:

this.someService.function2().pipe(
  //...
);

Without seeing your function1 and function2 people can not help you.

answered Mar 04 '20 at 09:51

Wilt

41,477
12
152
203

Sorry - typo error - the code was not copied, but rewrite. – Guy E Mar 04 '20 at 10:42
I don't agree - No need to show functio1 and function2 code as long as I describe their output type - the problem is with the structure of the flow and types mismatch – Guy E Mar 04 '20 at 10:52

score 1 · Answer 2 · answered Mar 04 '20 at 09:59

In your second example, within the most external pipe, you have

this.someService.function1().pipe(
       map(f1result => 
       {
           this.someService.repositpry.f1ResultData = f1Result;
       })

f1result is an Observable. In the inner pipe you use a map operator. This is different from the first example, the one which is working, since in the first example you use switchMap, which flattens the Observable.

So you may have to use switchMap in the inner pipe as well, followed by a map to return the result you are looking for, something like this

return this.someService.function2.pipe( 
  switchMap(f2Result => 
  {
      this.someService.function1().pipe(
       switchMap(f1result => 
       {
           this.someService.repositpry.f1ResultData = f1Result;
       }.pipe(() => {
           if (f2Result) return true
           else return false;
       }))
    );
 }));

Not having a real example to try, this is just a suggestion

score 1 · Answer 3 · answered Mar 04 '20 at 10:23

1

Hi you need a concatMap operator to do this.

return this.someService.function1().pipe(
  concatMap(f1Result => 
  {
     this.someService.repositpry.f1ResultData = f1Result;
     return this.someService.function2.pipe(
        map(res => 
       {
           if (res) return true;
           else return false;
       }));
   })
 )

answered Mar 04 '20 at 10:23

Rahul Tokase

1,048
9
25

This isn't answering my question : I need to execute function2() before function1. – Guy E Mar 04 '20 at 10:46
1

its not the updated solution your following the promise way which can lead you to the callback hell. you should make a use of RXjs operator – Rahul Tokase Mar 04 '20 at 11:19

SOLVED - When running 2 observables one after another - getting result based on the first one

3 Answers3