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

Issue

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?

Solution

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.

Answered By - Pankaj Parkar