RXJS how to use OR condition

Question

I have two Observables

For example, I am waiting HTTP POST call to come back OR WebSocket call come back so I can continue. Either call come back I need to verify the information and until certain condition met. Follow example that either one come back I can continue. But if I use filter, it will stop and wait wont proceed.

switchMap(() =>
    webSocket.access.pipe(
        filter((data) => data.access.role === "ADMIN"),
        filter((data) => data.access.status === "ACTIVE")
    )
),
switchMap(() =>
    httpService.access.pipe(filter((res) => res.access === true))
);

Sorry, at least to me it's not really clear what you want to do here. Do you intend to start a websocket call and a http-call in parallel and use whatever returns first? Can you please create a [mre] and show us the expected output? — Lukas-T, Jan 13 '23 at 07:26

score 2 · Accepted Answer · answered Jan 13 '23 at 08:43

Use the race operator:

race(
  switchMap(() =>
    webSocket.access.pipe(
        filter((data) => data.access.role === "ADMIN"),
        filter((data) => data.access.status === "ACTIVE")
    )
  ),
  switchMap(() =>
    httpService.access.pipe(filter((res) => res.access === true))
  )
).pipe(/* do subsequent operations here */);

https://www.learnrxjs.io/learn-rxjs/operators/combination/race

score 0 · Answer 2 · answered Jan 13 '23 at 07:28

I Imagine

obsPost$:Observable<any>=...
socket$:Observable<any>=

We use merge to get any of the observables. But transform each observable in an object with property "id" and "data"
Then filter (get the "access" value according the value of "id")
Finally return only the "data"

   myObs$=merge(obsPost$.pipe(map((res:any)=>({id:'post',data:res}))
                 socket$.pipe(map((res:any)=>({id:'socket',data:res}))).pipe(
                   filter((res:any)=>{
                      const access:any=res.id=="post"? data.data.access.role:
                                                       data.access
                      return access==true || access=='ADMIN' || access=='ACTIVE')
                   }),
                   map(res=>res.data))

RXJS how to use OR condition

2 Answers2