Wait to resolve Nested loops in a Typescript Subscribe

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)));
  }

Answer

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...
}