Waiting for an Observable to complete in an Angular map operation

Question

Waiting for an Observable to complete in an Angular map operation

Attempting to send HttpClient in an Observable function without waiting for it to complete.

Below is a sample code snippet to replicate the issue:

    test() {
    this.test2()
      .pipe(
        mergeMap((result) => {
          console.log(result[0]);
          return of([]);
        })
      )
      .subscribe();
  }
  test1(): Observable<any> {
    return of(this.getStudents());
  }
  test2(): Observable<any> {
    return this.test1().pipe(
      mergeMap((result) => {
        if (result) {
          result.map((rr) => {
            if (rr.age == 1) {
              this.client
                .get('https://api.coindesk.com/v1/bpi/currentprice.json')
                .subscribe((res) => {
                  console.log(res);
                  rr.age = rr.age * 10000;
                });
            } else {
              rr.age = rr.age * 10;
            }
            return rr;
          });
        }
        return of(result);
      })
    );
  }
  getStudents(): Student[] {
    return [{ age: 1 }, { age: 2 }, { age: 3 }];
  }

This is Student

export class Student {
  age: number;
}

To achieve the expected result, console.log(res); should come before console.log(result[0]);.

Tried methods like .toPromise and async await, but didn't succeed in resolving the issue.

You can try out a modified version here:

https://stackblitz.com/edit/save-file-to-drive-7dawzd?file=src/app/app.component.ts

angular typescript rxjs observable httpclient

Answer 1

Answer №1

As per your desired outcome, it is crucial for the API call to be completed before displaying Student[0].

The issues with your code are:

You are subscribing to an API call without waiting for it to finish, leading to console.log(result[0]) being executed before console.log(res); because the API call is still in progress.

I employed various RXJS operators to achieve the desired result.

mergeMap was used to flatten the nested observable.
of aided in converting the student array into an observable.
map assisted in transforming the current array into a new array with updated ages.
forkJoin consolidated multiple requests into one observable and only concludes once responses from all requests are received.

This approach is just one way of accomplishing this task, and there could be more efficient methods available.

test() {
  this.test2()
    .pipe(
      mergeMap((result) => {
        console.log(result);
        if (result && result.length > 0) {
          console.log(result[0]);
        }
        return of([]);
      })
    )
    .subscribe();
}
test1(): Observable < Student[] > {
  // return of(null);
  return of(this.getStudents());
}
test2(): Observable < Student[] > {
  return this.test1().pipe(
    mergeMap((result) => {
      if (!result) {
        return of(result);
      }
      return forkJoin(
        result.map((rr) =>
          rr.age === 1 ?
          this.client
          .get('https://api.coindesk.com/v1/bpi/currentprice.json')
          .pipe(
            map((res) => {
              console.log(res);
              return (rr.age = rr.age * 10000);
            })
          ) :
          of ((rr.age = rr.age * 10))
        )
      ).pipe(
        map((paths) => {
          return result.map((e, index) => ({
            age: paths[index],
          }));
        })
      );
    })
  );
}

getStudents(): Student[] {
  return [{
    age: 1
  }, {
    age: 2
  }, {
    age: 3
  }];
}

I made modifications to the Stackblitz you set up to simulate the solution.

Answer 2

As per your desired outcome, it is crucial for the API call to be completed before displaying Student[0].

The issues with your code are:

You are subscribing to an API call without waiting for it to finish, leading to console.log(result[0]) being executed before console.log(res); because the API call is still in progress.

I employed various RXJS operators to achieve the desired result.

mergeMap was used to flatten the nested observable.
of aided in converting the student array into an observable.
map assisted in transforming the current array into a new array with updated ages.
forkJoin consolidated multiple requests into one observable and only concludes once responses from all requests are received.

This approach is just one way of accomplishing this task, and there could be more efficient methods available.

test() {
  this.test2()
    .pipe(
      mergeMap((result) => {
        console.log(result);
        if (result && result.length > 0) {
          console.log(result[0]);
        }
        return of([]);
      })
    )
    .subscribe();
}
test1(): Observable < Student[] > {
  // return of(null);
  return of(this.getStudents());
}
test2(): Observable < Student[] > {
  return this.test1().pipe(
    mergeMap((result) => {
      if (!result) {
        return of(result);
      }
      return forkJoin(
        result.map((rr) =>
          rr.age === 1 ?
          this.client
          .get('https://api.coindesk.com/v1/bpi/currentprice.json')
          .pipe(
            map((res) => {
              console.log(res);
              return (rr.age = rr.age * 10000);
            })
          ) :
          of ((rr.age = rr.age * 10))
        )
      ).pipe(
        map((paths) => {
          return result.map((e, index) => ({
            age: paths[index],
          }));
        })
      );
    })
  );
}

getStudents(): Student[] {
  return [{
    age: 1
  }, {
    age: 2
  }, {
    age: 3
  }];
}

I made modifications to the Stackblitz you set up to simulate the solution.

Answer 3

Answer №2

The RxJS Approach:

When dealing with API endpoint responses that are not immediately needed, leveraging RxJS higher-order operators like mergeMap, switchMap, or concatMap allows you to manage waiting for the results efficiently.

For processing an entire array of observables simultaneously, forkJoin stands out as a convenient option. The forkJoin method will collect the last values from each observable and emit them in an array once they have completed.

test() {
  // Removing mergeMap as it doesn't serve any purpose here.
  this.test2().subscribe(
    students => console.log(students[0])
  );
}

test1(): Observable<Student[]> {
  return of(this.getStudents());
}

test2(): Observable<Student[]> {

  return this.test1().pipe(

    map(students => students?.map(student => {
      if(student.age == 1){
        return this.client.get(
          'https://api.coindesk.com/v1/bpi/currentprice.json'
        ).pipe(
          tap(currentPrice => console.log(currentPrice)),
          mapTo({...student, age: student.age * 1000})
        )
      }else{
        return of({...student, age: student.age * 10})
      }
    })),

    mergeMap(studentCalls => forkJoin(studentCalls))

  );
}

getStudents(): Student[] {
  return [{ age: 1 }, { age: 2 }, { age: 3 }];
}

Answer 4

The RxJS Approach:

When dealing with API endpoint responses that are not immediately needed, leveraging RxJS higher-order operators like mergeMap, switchMap, or concatMap allows you to manage waiting for the results efficiently.

For processing an entire array of observables simultaneously, forkJoin stands out as a convenient option. The forkJoin method will collect the last values from each observable and emit them in an array once they have completed.

test() {
  // Removing mergeMap as it doesn't serve any purpose here.
  this.test2().subscribe(
    students => console.log(students[0])
  );
}

test1(): Observable<Student[]> {
  return of(this.getStudents());
}

test2(): Observable<Student[]> {

  return this.test1().pipe(

    map(students => students?.map(student => {
      if(student.age == 1){
        return this.client.get(
          'https://api.coindesk.com/v1/bpi/currentprice.json'
        ).pipe(
          tap(currentPrice => console.log(currentPrice)),
          mapTo({...student, age: student.age * 1000})
        )
      }else{
        return of({...student, age: student.age * 10})
      }
    })),

    mergeMap(studentCalls => forkJoin(studentCalls))

  );
}

getStudents(): Student[] {
  return [{ age: 1 }, { age: 2 }, { age: 3 }];
}

Waiting for an Observable to complete in an Angular map operation

Answer №1

Answer №2

The RxJS Approach:

Similar questions

Adjust the placement of a div within another div based on various screen sizes dynamically

Can PassportLocalDocument and PaginateModel coexist within the same framework?

Determine the class of an object within the "keyof" parameter by utilizing both property and generic types

Encountering difficulties while attempting to transition from angular 9 to angular 10

The React component is not refreshed reactively with Redux Observable, rxjs, and rx-http-request

Modify the content of a separate division by selecting a different item in a list with the help of Vue.js and TypeScript

Making an HTTP request within a forEach function in Angular2

Is there a way to utilize req.query, req.params, or req.* beyond its original scope without the need to store it in a database?

Anticipating the outcome of a function in asynchronous JavaScript

Creating the upcoming application without @react-google-maps/api is simply not possible

Using the tensorflow library with vite

What is the clarification on Angular's paramMap.getAll method?

Problem with the Auto-fill Feature in PrimeNG Module

Verify if the Observable (HTTP request) has provided a response, and if not, hold for it?

A step-by-step guide on incorporating a .env file into a React JS project that is written with TypeScript

I am having difficulty accessing the values stored in my cardTiles variable

Terminating a function during execution in JavaScript/TypeScript

Angular 8: How to Retrieve Query Parameters from Request URL

Press on a list item within Angular Material 2/4

Encountered a problem while executing the command (npm install -g @angular/cli) on a Mac