Return asynchronous data from an angular method

Question

I am fairly new to angular and am still trying to wrap my head around doing things the angular + httpClient + rxjs way. I am trying to write the rxjs equivalent of the following:


async onButtonClick = () => {
    const processedBooks = await this.getAndProcessBooks();
    await myGenericHttpClient.post('/api/something', processedBooks);
}

async getAndProcessBooks = () => {
    const books = await myGenericHttpClient.get('/api/books');

    const processedBooks = books.map(book => {
        return book.read = true;
    });

    return books;
};

My understanding of rxjs is i need to use angular's httpClient to make the request then subscribe to the response:

getAndProcessBooks = () => {
    return httpClient.get('/api/books').subscribe(books => {
        return books;
    });
};

However, the problem is getAndProcessBooks returns a subscription, not an array of books so I'm not sure how this method can return the data that I need. Any help or direction to resources would be appreciated!

Does this answer your question? Angular - Return from subscribe — kvetis
– kvetis, Commented Feb 11, 2022 at 15:44

HassanMoin · Accepted Answer · 2022-02-11 16:50:29Z

3

You can take the result from one API call and send it to another API call using the different map operators such as mergeMap, concatMap, etc of RxJs, which ever suits your use case.

I separated your HTTP calls and created functions for them just for easy readability.

//Returns Books
getAndProcessBooks(): Observable<any> {
    return this.myGenericHttpClient.get('/api/books');
}

//API something that requires books to send call
apiSomethingFunction(processedBooks: any): Observable<any> {
   return this.myGenericHttpClient.post('/api/something', processedBooks);
}

//On the button click
 onButtonClick(): void {
    this.getAndProcessBooks()
      .pipe(
        switchMap((books) => {
          //Response of books comes here, you can map them before sending it to the something API
          return this.apiSomethingFunction(books);
        })
      )
      .subscribe((resp) => {
        console.log(resp);
        console.log('I got Response of API Something');
      });
  }

The reason I used switchMap operator was to cancel the previous HTTP call if the user clicks on the button again. You can use different map if your use-case is different.

answered Feb 11, 2022 at 16:50

HassanMoin

2,2341 gold badge10 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

John Grayson Over a year ago

this should work, thank you for your help!

Joosep Parts · Accepted Answer · 2022-02-11 15:51:59Z

0

You could just take the observable and use it directly.

unprocessedBooks$: Observable<any>;

getAndProcessBooks() {
    unprocessedBooks$ = httpClient.get('/api/books').pipe(data => {return data;});
};

And in html

<div>{{ unprocessedBooks$ | async}}</div>

answered Feb 11, 2022 at 15:51

Joosep Parts

6,3452 gold badges13 silver badges38 bronze badges

1 Comment

John Grayson Over a year ago

thanks @joosep - i made a slight change to my question in which i explain that i need to send the data to another endpoint, not show it in a template.

Collectives™ on Stack Overflow

Return asynchronous data from an angular method

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related