Anticipating the outcome of various observables within a loop

Question

Anticipating the outcome of various observables within a loop

I'm facing a problem that I can't seem to solve because my knowledge of RxJs is limited.

I've set up a file input for users to select an XLSX file (a spreadsheet) in order to import data into the database. Once the user confirms the file, various validations are performed on the document before insertion to prevent any issues.

The file is scanned and checked line by line. However, one of my verification processes is causing a dilemma. I need to utilize a database procedure to verify the existence of certain data in the database. The issue arises when the query returns an observer, causing my for loop to iterate through the entire file even before receiving the query result. The console displays 'Import finish' before completing the necessary checks.

I am wondering if there's a way to pause the loop until I receive the result from the subscribe function, or if I can let the loop complete and then finalize the import once all results are obtained.

Component:

importObjectives(): void {
    // Code snippet
}

Store Wallet:

checkWallets(xlsx: XLSXObjective, lineError): Observable<any> {
    // Code snippet
}

Service Wallet:

checkWallets(xlsx: XLSXObjective): Observable<any> {
    // Code snippet
}

Any assistance would be greatly appreciated. Thank you, and please excuse any language errors.

angular typescript rxjs observable angular8

Answer 1

Answer №1

Utilize Observable.forkJoin to create a loop for observables, allowing you to wait for all data to be received from multiple observables.

Observable.forkJoin is ideal when you need to synchronize the responses from multiple HTTP calls.

If you are unsure about the data returned by your HTTP calls, here's a simple example:

    loadedCharacter: {};
  constructor(private http: HttpClient) { }

  ngOnInit() {
    let character = this.http.get('https://swapi.co/api/people/1');
    let characterHomeworld = this.http.get('http://swapi.co/api/planets/1');

    forkJoin([character, characterHomeworld]).subscribe(results => {
      // results[0] contains character data
      // results[1] contains character homeworld data
      results[0].homeworld = results[1];
      this.loadedCharacter = results[0];
    });

Answer 2

Utilize Observable.forkJoin to create a loop for observables, allowing you to wait for all data to be received from multiple observables.

Observable.forkJoin is ideal when you need to synchronize the responses from multiple HTTP calls.

If you are unsure about the data returned by your HTTP calls, here's a simple example:

    loadedCharacter: {};
  constructor(private http: HttpClient) { }

  ngOnInit() {
    let character = this.http.get('https://swapi.co/api/people/1');
    let characterHomeworld = this.http.get('http://swapi.co/api/planets/1');

    forkJoin([character, characterHomeworld]).subscribe(results => {
      // results[0] contains character data
      // results[1] contains character homeworld data
      results[0].homeworld = results[1];
      this.loadedCharacter = results[0];
    });

Answer 3

Answer №2

Here's my approach:

const observableTasks = [];

fetchDataFromExternalSource(): void {
    if (this.dataFile) {
        if (["xlsx","xls","csv"].includes(this.dataFile.name.split('.').pop())) {
            if (typeof (FileReader) !== 'undefined') {
                const reader = new FileReader();

                reader.onload = (event: any) => {
                    let fileDataArray = new Uint8Array(event.target.result);
                    let workbook: XLSX.WorkBook = XLSX.read(fileDataArray, { type: 'array' });
                    let sheetName: string = workbook.SheetNames[0];
                    let worksheet: XLSX.WorkSheet = workbook.Sheets[sheetName];
                    let parsedData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });

                    parsedData.shift();
                    for(var rowData of parsedData) {
                        var rowLineNumber = parsedData.indexOf(rowData) + 2;
                        // Additional validations...
                        observableTasks.push(this.dataProcessingService.checkData(this.XLSXObjective, rowLineNumber))
                    }

                    forkJoin(observableTasks).subscribe(dataResults => {
                      if(this.errors.length > 0) {
                          console.error("Errors encountered:");
                          console.error(this.errors);
                      } else {
                          console.log("Data import completed successfully");
                      }
                    }
                    this.dialogReference.close();
                };
                reader.readAsArrayBuffer(this.dataFile);
            }
        } else {
            console.error("File format not supported");
            this.dialogReference.close();
        }
    } else {
        console.error("No data file provided");
        this.dialogReference.close();
    }
}

Answer 4

Here's my approach:

const observableTasks = [];

fetchDataFromExternalSource(): void {
    if (this.dataFile) {
        if (["xlsx","xls","csv"].includes(this.dataFile.name.split('.').pop())) {
            if (typeof (FileReader) !== 'undefined') {
                const reader = new FileReader();

                reader.onload = (event: any) => {
                    let fileDataArray = new Uint8Array(event.target.result);
                    let workbook: XLSX.WorkBook = XLSX.read(fileDataArray, { type: 'array' });
                    let sheetName: string = workbook.SheetNames[0];
                    let worksheet: XLSX.WorkSheet = workbook.Sheets[sheetName];
                    let parsedData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });

                    parsedData.shift();
                    for(var rowData of parsedData) {
                        var rowLineNumber = parsedData.indexOf(rowData) + 2;
                        // Additional validations...
                        observableTasks.push(this.dataProcessingService.checkData(this.XLSXObjective, rowLineNumber))
                    }

                    forkJoin(observableTasks).subscribe(dataResults => {
                      if(this.errors.length > 0) {
                          console.error("Errors encountered:");
                          console.error(this.errors);
                      } else {
                          console.log("Data import completed successfully");
                      }
                    }
                    this.dialogReference.close();
                };
                reader.readAsArrayBuffer(this.dataFile);
            }
        } else {
            console.error("File format not supported");
            this.dialogReference.close();
        }
    } else {
        console.error("No data file provided");
        this.dialogReference.close();
    }
}

Anticipating the outcome of various observables within a loop

Answer №1

Answer №2

Similar questions

What is the method for defining a mandatory incoming property in an Angular2 component?

Updating objects in Angular 8 while excluding the current index: a guide

What advantages does CfnAppSync provide over using AppSync in a CDK project?

Subscribe to the service in Angular and make repeated calls within the subscription

Is it possible for Next.js to retrieve the window size without resorting to a faulty hook call or encountering an undefined window

Angular 15 is unfortunately not compatible with my current data consumption capabilities

Error in Typescript for callback function: The type 'Function' does not match any signature

Error: Unable to access the 'DASH' property as it is undefined

How to specify a single kind of JavaScript object using Typescript

Tips for including and excluding personalized Chips from input

Error encountered in lodash.js in Angular 2 framework

Is it TypeScript's return type a double arrow (Observable)?

The error message "ng: command not found" popped up despite successfully installing the latest @angular/cli using npm linking

What is the reason behind typescript making it necessary for me to find a way to set a value of type

CORS policy has blocked access to XMLHttpRequest from the origin because the requested resource does not have the 'Access-Control-Allow-Origin' header

Is Angular2 detecting changes based on value equivalence or reference equality?

What is the process for validating multiple check boxes using the reactive forms module?

Ways to specify a setter for a current object property in JavaScript

The utilization of rxjs' isStopped function is now considered

Steps for removing the style when a button is clicked