Angular RxJs - sequential HttpRequests with passing previous response data to next request-CodePudding

I have code like this. Basically my backend has some limitations and to load all data I have to iterate through all pages by passing last evaluated uuid.

private getOrdersElements$(uuid: string): Observable<OrderElement[]> {
var lastEvaluatedUuid = "INIT";
const elements: OrderElement[] = [];
const o = new Observable<OrderElement[]>(observer => {
  do {
    this.http.get<OrderElementsWithLimitDTO>(`${this.appConfigService.BackendUrl}/api/constructions/${uuid}/constructionOrdersElementsWithLimit/${lastEvaluatedUuid}`)
      .pipe(take(1))
      .subscribe((elementsResponseDTO: OrderElementsWithLimitDTO) => {
        elementsResponseDTO.ordersElements.forEach(e => {
          elements.push(e);
          lastEvaluatedUuid = elementsResponseDTO.lastEvaluatedUuid;
        });
      });
  }
  while(lastEvaluatedUuid);
  observer.next(elements);
  observer.complete();
});
return o;

}

but this code does not work because the loop all the time creates a new requests until lastEvaluatedUuid has no value.

How to code it in this way that next request will be created after receiving previous response so I can use in the next request value of lastEvaluatedUuid from the previous response?

-Jacek

CodePudding user response：

You can simply use recursion to achive this like

lastEvaluatedUuid = "INIT";
elements: OrderElement[] = []

getData(){
 this.http.get.pipe(take(1))
  .subscribe(res =>{
      this.elemets = [...this.elemnts,...res.elemnts]
      this.lastEvaluatedUuid = res.lastEvaluatedUuid
    if(your condition is true){
      this.getData()
     }
   })
}