How to wait for an observable to complete to return a value?

Question

I have a function which is as follow.

 public getAssemblyTree(id: number) { .... const request = from(fetch(targetUrl.toString(), { headers: { 'responseType': 'json' }, method: 'GET' })); request.subscribe( (response) => { response.json().then(data => { assemblyNodesForTree.push(...this.parseAssemblyTree(data['flat_assembly_graph'])); } ) } ) console.log(assemblyNodesForTree) return assemblyNodesForTree; }

I realised that the function is returning assemblyNodesForTree without the observable completing. I was wondering what may be the right way to go about this?

How about returning the observable and subscribe to it wherever you need the data? May I ask why do you use fetch instead of Angular's HttpClient? — OctavianM
– OctavianM, Commented Aug 8, 2022 at 7:37

Pankaj Parkar · Accepted Answer · 2022-08-08 08:00:00Z

You're thinking of an asynchronous operation to work in a synchronous way. Also refers to question Problem returning value from RxJS Observable. It explains kind of similar usecase.

Quick Suggestion:- use fromFetch instead of from(fetch)

Why fromFetch? - because it internally uses the fetch API, and completes the observable after API call is finished.

You're subscribing inside the getAssemblyTree function, which is going to be called in a while once ajax is finished. And before that you just return rather you should return assemblyNodesForTree varaible. That will be empty always.

To deal with async nature, you can pipe your observable, and do the relevant operation inside map operator function. At the end return Promise/Observable from the getAssemblyTree function.

public getAssemblyTree(id: number) { .... const request = fromFetch({ url: targetUrl.toString(), headers: { 'responseType': 'json' }, method: 'GET' }).pipe( map(async (response) => { const assemblyNodesForTree = []; const data = await response.json() assemblyNodesForTree.push( ...this.parseAssemblyTree(data['flat_assembly_graph']) ); return assemblyNodesForTree; }) ); return request; }

Usage

async myFunction() { const assemblyNodesForTree = await lastValueFrom(getAssemblyTree(id)) }

Usage of this function is going to be pretty simple, call getAssemblyTree(id) function wrapper with the lastValueFrom(). And as soon as fromFetch API call finishes it will resolve the promise.

Hi. Thank you so much for the answer Pankaj. The only problem with this is that it says lastValueFrom does not exist anymore in rxjs. In that regard, what could be the alternative to this?
Hi. I used toPromise instead and it worked. Thanks a bunch! :)
@GeekAndNerd223 Glad to know, it worked. QQ - Curious to know, which angular version you're using, I think toPromise is already deprecated. Probably you're using an earlier angular version.

Collectives™ on Stack Overflow

How to wait for an observable to complete to return a value?

1 Answer 1

6 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Linked

Related