Unending loop caused by nested subscriptions - Angular / RxJS

Question

Unending loop caused by nested subscriptions - Angular / RxJS

I am currently implementing a nested subscribe operation, although I am aware that it may not be the most efficient method. Here is an example of what I have:

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

However, the addition of the loop has resulted in an infinite loop. I am exploring the possibility of refactoring this code using switchmap or operators from RxJS, but have not yet been successful.

Does anyone have any suggestions on how to avoid the infinite loop while maintaining the same logic?

Thank you in advance.

javascript angular typescript rxjs

Answer 1

Answer №1

If you're looking to implement a conditional loop with a break when certain conditions are met, consider creating a separate method that recursively calls itself until 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

If you're looking to implement a conditional loop with a break when certain conditions are met, consider creating a separate method that recursively calls itself until 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 3

Answer №2

Unfortunately, I am unable to view your complete code to fully grasp the concept of what you are attempting to achieve. However, it appears that you are in the early stages of learning rxjs and the this.over variable is being used to monitor the status of your nested request. It seems that there are multiple errors in your provided code.

It is recommended to incorporate other rxjs operators such as switchMap() to enhance the clarity of your code. I will demonstrate a basic approach using the new rxjs pipable syntax.

this.route.params.pipe(
  // The switchMap() function is triggered when there are changes in route parameters
  // The variable order$ might not be an Observable, implying its name should not end with $
  switchMap(() => this.order$.getMailCommande(this.id)),
  // The tap() operator executes after the completion of getMailCommande()
  tap(() => {
    var retrievedObject = localStorage.getItem('dataCommand');
    var test = JSON.parse(retrievedObject);
    this.over = test.over;
  }),
  // The switchMap() function executes after the tap() function
  switchMap(() => this.order$.getMoreInfo(this.id, this.type, this.nbr)),
  // The tap() function executes after getMoreInfo() completes
  tap(datas2 => {
    var array = datas2.MoreInfo;
    var Object2 = localStorage.getItem('dataCommand');
    var test2 = JSON.parse(Object2);
    test2.ListeInfo.push(array);
    this.over = true;
  })
).subscribe();

Answer 4

Unfortunately, I am unable to view your complete code to fully grasp the concept of what you are attempting to achieve. However, it appears that you are in the early stages of learning rxjs and the this.over variable is being used to monitor the status of your nested request. It seems that there are multiple errors in your provided code.

It is recommended to incorporate other rxjs operators such as switchMap() to enhance the clarity of your code. I will demonstrate a basic approach using the new rxjs pipable syntax.

this.route.params.pipe(
  // The switchMap() function is triggered when there are changes in route parameters
  // The variable order$ might not be an Observable, implying its name should not end with $
  switchMap(() => this.order$.getMailCommande(this.id)),
  // The tap() operator executes after the completion of getMailCommande()
  tap(() => {
    var retrievedObject = localStorage.getItem('dataCommand');
    var test = JSON.parse(retrievedObject);
    this.over = test.over;
  }),
  // The switchMap() function executes after the tap() function
  switchMap(() => this.order$.getMoreInfo(this.id, this.type, this.nbr)),
  // The tap() function executes after getMoreInfo() completes
  tap(datas2 => {
    var array = datas2.MoreInfo;
    var Object2 = localStorage.getItem('dataCommand');
    var test2 = JSON.parse(Object2);
    test2.ListeInfo.push(array);
    this.over = true;
  })
).subscribe();

Unending loop caused by nested subscriptions - Angular / RxJS

Answer №1

Answer №2

Similar questions

Run code from an inline script that is retrieved from an external origin

Show the hash codes in angular2

The operation of "grunt build" results in a Lexer Error, causing the ng-include

Using Angular to open a modal by invoking the href function

Error: Trying to access the 'title' property of an undefined variable in Vue.js

Issue arises when trying to insert an image avatar onto a globe in three.js

RxJS pipe operation ignoring observable

The Yeoman Angular Coffee router is not routing properly and displays an error message "cannot GET"

Enhancing Website Functionality: How to Swap iFrame for DIV using PHP and AJAX

Creating a sidebar with child elements in Vitepress: A beginner's guide

Challenges encountered when using Tailwindcss and Nextjs with class and variables

Saving an array within the Yii framework

Having trouble executing ng build --prod in Azure CICD pipelines

Interactive planetary visualization using three.js in real-time

Filter numbers within an Array using a Function Parameter

Tips for adjusting the minimum attribute within an input field with jQuery

Using JavaScript functions within PHP is not supported

A textarea with a height of zero is still visible

Step-by-step guide: Deploying your app to Heroku with Babel and ES6 support

Create and export a React component with dual properties