Wait to resolve Nested loops in a Typescript Subscribe

Question

Objective: I want to wait for all the nested loops to process before I can return final value.

Issue: Final value is returned before all the loops are processed.

In the below code I am sending paramListToComplete to a data service to create a record and get that new record in the same call, so that I can set missing values in paramListToComplete and return paramListToComplete with updated values from service. The problem is the function returns the list before processing all the loops, so my paramListToComplete remains incomplete.

Does anybody know how to wait for all the loops to process or maybe convert all these nested loops to a promise and wait for all of them to resolve? Any help is appreciated.

  CompleteParamList(paramListToComplete): any {
    this.dataService.UpdateCall(paramListToComplete)
      .subscribe(
        data => {
          if (data) {
            for (var server of paramListToComplete) {
              for (var updatedData of data) {
                if (paramListToComplete.length === 1 && !server.Name) {
                  server.Name = updatedData.Name;
                }
                if (!server.serverCode && server.Name === updatedData.Name) {
                  server.serverCode = updatedData.serverCode;
                  for (var serverGroup of server.serverGroups) {
                    serverGroup.serverCode = updatedData.serverCode;
                  }
                  for (var updatedserverGroup of server.UpdatedserverGroups) {
                    updatedserverGroup.serverCode = updatedData.serverCode;
                  }
                }
              }
            }
          }
        }
    );
    return paramListToComplete;
  }

    UpdateCall(bdy: Array<testParams>) {
    let url = 'endpoint/path';
    let body = bdy;
    let options;
    return this.service.getToken()
      .map(Response =>
        options = new RequestOptions({
          headers: this.httpHelperService.buildHttpHeader(Response.json())
        }))
      .mergeMap(() => this.http.put(url, body, options)
        .map(this.extractData)
        .catch((this.handleError)));
  }

Does `this.dataService.UpdateCall(paramListToComplete).subscribe(...)` return a promise? If so, you just need to use the `await` keyword before calling it, then make `CompleteParamList` async: `async function CompleteParamList(...): Promise {...}` — smac89, Mar 02 '22 at 04:15
@smac89 I have added code for UpdateCall in the question, it returns a observable. I haven't had lot of experience with observables. So struggling to handle this scenario. — Programmermid, Mar 02 '22 at 04:22
Check this question: https://stackoverflow.com/questions/36777284/angular-2-convert-observable-to-promise I believe your `.subscribe` method returns an observable which can be converted into a promise and then you can await it... — smac89, Mar 02 '22 at 04:53
@smac89 a little correction, subscribe will return subscription instead of an observable. — Yogi, Mar 02 '22 at 18:58

score 0 · Accepted Answer · answered Mar 02 '22 at 18:56

Be lazy! don't subscribe to observable returned from UpdateCall method in CompleteParamList method, instead return it and let the caller subscribe to it. You can tap into the stream and modify the input param paramListToComplete and assuming you're on rxjs versoin 5 or below(for newer versions you can pipe it), the code will look like this:

completeParamList(paramListToComplete): Observable<void> {
  return this.updateCall(paramListToComplete).tap(data => {
    // update paramListToComplete here...
  });
}

so now wherever you're using completeParamList, you can simply subscribe to it or convert it to promise(which I do not recommend as toPromise is deprecated in newer version of rxjs)

someMethod() {
  const paramList = [];
  this.service.completeParamList(paramList).subscribe(_ => {
    // paramList has been updated, do your thang here...
  });
}
// alternative way
async someOtherMethod() {
  const paramList = [];
  await this.service.completeParamList(paramList).toPromise();
  // do your thang...
}

Wait to resolve Nested loops in a Typescript Subscribe

1 Answers1