嵌套订阅无限循环-Angular / RxJS

Question

I'm doing a nested subscribe that I know it's not the perfect way. I have something like this :

 this.route.params.subscribe((params) => {            
        this.order$
            .getMailCommande(this.id)
            .subscribe((datas) => {
                var Object = localStorage.getItem('dataCommand');
                var test = JSON.parse(retrievedObject);
                this.over = test.over;
                while (this.over == false) {
                    this.order$
                        .getMoreInfo(this.id, this.type, this.nbr)
                        .subscribe((datas2) => {
                            var array = datas2.MoreInfo;
                            var Object2 = localStorage.getItem('dataCommand');
                            var test2 = JSON.parse(Object2);
                            test2.ListeInfo.push(array);
                            this.over = true;
                        });
                }

Since I added the loop I got an infinity loop, i'm looking for changing this code with the switchmap or operators from RxJS but I haven't yet succeeded.

Any ideas of my infinity loop and how to keep the same logic ?

Thanks in advance

Answer 1

If you want to do the required logic in a loop and break when some condition matches then how about having a separate method which calls itself unless the condition is satisfied??

this.route.params.subscribe((params) => {            
        this.order$
            .getMailCommande(this.id)
            .subscribe((datas) => {
                var Object = localStorage.getItem('dataCommand');
                var test = JSON.parse(retrievedObject);
                this.over = test.over;
                while (this.over == false) {
                    this._loopMeOver.subscribe();
                }
            })
})


private _loopMeOver() {

    return this.order$
        .getMoreInfo(this.id, this.type, this.nbr)
        .map((datas2) => {
            var array = datas2.MoreInfo;
            var Object2 = localStorage.getItem('dataCommand');
            var test2 = JSON.parse(Object2);
            test2.ListeInfo.push(array);
            if (condition is successfull) {
                //return true mayBe
            }
            else {
                this._loopMeOver().subscribe()
            }
        });
}

Answer 2

I can't see your full code to get the whole idea of what you are trying to do. But I kinda feel that you just started learning rxjs and the this.over thing is trying to keep checking if your nested request is finished or not. And there are various mistakes in your example code btw.

So yes you would need other rxjs operators like switchMap() to make your code cleaner. I'll use the new rxjs pipable syntax to show you a general idea of how to do that.

this.route.params.pipe(
  // this switchMap() is called when route params changes
  // order$ seems not a Observable, it's misleading to name it with an ending $
  switchMap(() => this.order$.getMailCommande(this.id)),
  // this tap() operator is called after getMailCommande() finish
  tap(() => {
    var retrievedObject = localStorage.getItem('dataCommand');
    var test = JSON.parse(retrievedObject);
    this.over = test.over;
  }),
  // this switchMap() is called after code inside tap is called
  switchMap(() => this.order$.getMoreInfo(this.id, this.type, this.nbr)),
  // this tap() is called after getMoreInfo() finish
  tap(datas2 => {
    var array = datas2.MoreInfo;
    var Object2 = localStorage.getItem('dataCommand');
    var test2 = JSON.parse(Object2);
    test2.ListeInfo.push(array);
    this.over = true;
  })
).subscribe();