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

AngularYelp: Node Integration for Enhanced Functionality

Avoid triggering onClick events on all rows when clicking, aim for only one row to be affected per click

Troubleshooting Angular 2 routerLink functionality issues

When the first argument is missing, using a recursive constraint default can result in the incorrect inference of the second argument, especially when both arguments share the same generic

Troubleshooting the issue of Angular2's http withCredentials not functioning as expected

Determine the output type of a function in Typescript using an input value specified by an enum

Cricket score update features on the client side

The instanceof operator does not recognize the value as an instance and is returning false, even though it

Is there a specific type of function missing in Typescript?

"Encountering an error when trying to access undefined property in templates

How do @material-ui/core and @types/material-ui interact with each other?

Trouble of VueJs array data property with .includes() in search for integer value

Exploring the power of makeStyles in Material UI when combined with TypeScript

Encountering type errors in NextJS with TypeScript

Disable the default animation

Perform a delayed evaluation of the length of the @Input() array

Mastering the art of Typescript typing

Pagination problem arises when sorting through items

Tips for specifying a variable as a mandatory key attribute within an array

Error Message: The Query<DocumentData> type cannot be assigned to the DocumentReference<DocumentData> parameter