What is the best way to invoke an observable service a limited number of times and continue until a specific condition is satisfied with a predefined interval?

Question

What is the best way to invoke an observable service a limited number of times and continue until a specific condition is satisfied with a predefined interval?

I would like to achieve the following:

Make a service call only 30 times OR until a specific condition is met.
The service must be called every 5 seconds.
It would be great if I could see only one console.log in the subscribe function.

Let's say the condition for stopping the service calls is when accuracy drops below 50. I started with the provided code but ran into call stack issues. Can anyone provide working code for this scenario? I am asking for help here while continuing my own search for a solution. If I manage to find it on my own, I will come back and share the answer. I may not have much experience in this area, but I am determined to learn as much as I can.

public randomExample() {

    this.randomNumber().pipe(
      map((n) => {
        console.log('map', n);
        if (n.accuracy > 50) {
          throw n;
        }
        return n;
      }),
      retryWhen(e =>
        e.pipe(
          tap(n => console.log('value to high', n))
        )),
      delayWhen(n => timer(5000))
    ).subscribe((n) => {
      console.log('subscribed', n);
    })

  }

  public randomNumber(): Observable<{accuracy:number}> {
    const n = Math.floor(Math.random() * 100)
    let value = {accuracy:n}
    return of(value);
  }

angular typescript rxjs rxjs-observables rxjs-pipeable-operators

Answer 1

Answer №1

If you want to validate both the index and value, you can utilize the takeWhile method followed by using switchMap to trigger your API:

function exampleFunction() {
  interval(500)
    .pipe(
      switchMap(() => this.randomNumber()),
      takeWhile((n, index) => index < 30 && n.accuracy >= 50, true),
      switchMap(n => {
        // Make an API call here and return observable
      }),
    )
    .subscribe(n => {
      console.log('subscribed', n)
    })
}

Answer 2

If you want to validate both the index and value, you can utilize the takeWhile method followed by using switchMap to trigger your API:

function exampleFunction() {
  interval(500)
    .pipe(
      switchMap(() => this.randomNumber()),
      takeWhile((n, index) => index < 30 && n.accuracy >= 50, true),
      switchMap(n => {
        // Make an API call here and return observable
      }),
    )
    .subscribe(n => {
      console.log('subscribed', n)
    })
}

Answer 3

Answer №2

function generateRandomNumber(): { accuracy: number } {
  const num = Math.floor(Math.random() * 100);
  let value = { accuracy: num };
  return value;
}
interval(5000)
  .pipe(
    scan((acc, curr) => acc + 1, 0),
    takeWhile((count) => count <= 30),
    map(() => generateRandomNumber()),
    // tap((val) => console.log(val.accuracy)),
    takeWhile((val) => val.accuracy < 50),
    switchMap(() => of(Math.random() * 100).pipe(catchError(() => EMPTY)))
  )
  .subscribe((result) => {
    console.log("subscribed", result);
  });

The interval will trigger this function every 5 seconds.
scan acts as an accumulator that increments count on each interval emit.
takeWhile unsubscribes automatically once the count exceeds 30.
takeWhile keeps the interval active until the randomNumber generator produces a value less than 50, as we specify to unsubscribe if the value is not less than 50.
If the above conditions do not trigger an unsubscribe, we call our API using switchMap. If the API returns an error, we return an EMPTY observable using catchError to ensure the polling continues.
The subscribe block is executed only when the API call completes successfully.

Working link :- https://codesandbox.io/s/falling-flower-nblzz?file=/src/index.ts:219-726

If you prefer randomNumber to be an Observable :-

function generateRandomNumber(): Observable<{ accuracy: number }> {
  const num = Math.floor(Math.random() * 100);
  let value = { accuracy: num };
  return of(value);
}
interval(5000)
  .pipe(
    scan((acc, curr) => acc + 1, 0),
    takeWhile((count) => count <= 30),
    mergeMap(() => generateRandomNumber()),
    takeWhile((val) => val.accuracy < 50),
    switchMap(() => of(Math.random() * 100).pipe(catchError(() => EMPTY)))
  )
  .subscribe((result) => {
    console.log("subscribed", result);
  });

Working link :- https://codesandbox.io/s/wonderful-hill-mtxi5?file=/src/index.ts:220-701

Answer 4

function generateRandomNumber(): { accuracy: number } {
  const num = Math.floor(Math.random() * 100);
  let value = { accuracy: num };
  return value;
}
interval(5000)
  .pipe(
    scan((acc, curr) => acc + 1, 0),
    takeWhile((count) => count <= 30),
    map(() => generateRandomNumber()),
    // tap((val) => console.log(val.accuracy)),
    takeWhile((val) => val.accuracy < 50),
    switchMap(() => of(Math.random() * 100).pipe(catchError(() => EMPTY)))
  )
  .subscribe((result) => {
    console.log("subscribed", result);
  });

The interval will trigger this function every 5 seconds.
scan acts as an accumulator that increments count on each interval emit.
takeWhile unsubscribes automatically once the count exceeds 30.
takeWhile keeps the interval active until the randomNumber generator produces a value less than 50, as we specify to unsubscribe if the value is not less than 50.
If the above conditions do not trigger an unsubscribe, we call our API using switchMap. If the API returns an error, we return an EMPTY observable using catchError to ensure the polling continues.
The subscribe block is executed only when the API call completes successfully.

Working link :- https://codesandbox.io/s/falling-flower-nblzz?file=/src/index.ts:219-726

If you prefer randomNumber to be an Observable :-

function generateRandomNumber(): Observable<{ accuracy: number }> {
  const num = Math.floor(Math.random() * 100);
  let value = { accuracy: num };
  return of(value);
}
interval(5000)
  .pipe(
    scan((acc, curr) => acc + 1, 0),
    takeWhile((count) => count <= 30),
    mergeMap(() => generateRandomNumber()),
    takeWhile((val) => val.accuracy < 50),
    switchMap(() => of(Math.random() * 100).pipe(catchError(() => EMPTY)))
  )
  .subscribe((result) => {
    console.log("subscribed", result);
  });

Working link :- https://codesandbox.io/s/wonderful-hill-mtxi5?file=/src/index.ts:220-701

What is the best way to invoke an observable service a limited number of times and continue until a specific condition is satisfied with a predefined interval?

Answer №1

Answer №2

Similar questions

Designing a function declaration that filters out null values from a combined type

What is the process through which Typescript determines the property types of union types?

Pagination problem arises when sorting through items

What is the best way to construct a collection of promises' results by utilizing a for loop?

Tips for saving data from an observable into a variable or property

Looking for guidance on enhancing the dynamism of my Angular dynamic form

Geometric structures in the style of Minecraft: Hexagonal Voxel Design

How do I specifically indicate that K is the exact keyof T in TypeScript?

Error: When trying to run the `ng build` command in Git Bash, TypeScript module cannot be

Error in SvelteKIt: Unable to access session due to a function being called outside of

Embracing PWAs with subdomains – seamless installation

Having issues with unexpected token in Typescript while using "as HTMLElement" type?

The output from Typescript Box results in a union type that is overly intricate to illustrate

utilize makeStyles to modify button text color

Module 'csstype' not found

Navigating with Angular: Incorporating Deprecated Router with NgModule

Encountering an issue: The module ' ode_modules@sentryprofiling-nodelibsentry_cpu_profiler-win32-x64-120.node' could not be located

Incorporate Font Awesome icons throughout your Angular8 application for added visual appeal

Error Handling in Angular2 MVC 4 Project Route Issues

Unable to access the ID of collections in Firestore