execute the function once the filereader has completed reading the files

submitTCtoDB(updateTagForm:any){
    for(let i=0;i<this.selectedFileList.length;i++){

  let file=this.selectedFileList[i];
  this.readFile(file, function(selectedFileList) {
      this.submitTC(updateTagForm,selectedFileList);
});

     }

    }

  }

readFile(file, callback){
    let fileReader: FileReader = new FileReader();
  fileReader.onload= () => {
    this.fileContent=fileReader.result;
    if(this.fileContent.indexOf("END DATA | BEGIN RESULTS") != -1){

    alert("Multiple testcases found in "+file.name+" file.  Please separate/save testcases in Calc Builder. Then reimport");

    const index: number = this.selectedFileList.indexOf(file);

    if (index > -1) {
     this.selectedFileList.splice(index, 1);
     console.log(file.name+"removed from the list");
 }  



}
    fileReader.readAsText(file);

  }
  callback(this.selectedFileList);
  }

submitTC(updateTagForm:any,selectedFileList){
    //process the selectedFileList came after the readFile has finished erading the files
  }

i am seeking guidance on how to properly execute the submitTC function only after the fileReader completes reading the files. I am unsure about the implementation of the readFile() callback. Any assistance in writing the correct logic for this scenario would be greatly appreciated. Flow: When user triggers submitTCtoDB, the function is called which then initiates the process where readFile reads the files, removes any unwanted elements, and returns the refined selectedFileList. Finally, submitTC takes this list and continues with its processing.

Please lend your expertise in solving this issue.

Answer №1

Consider utilizing es6 arrow function => over traditional function declarations in order to access the current class method instance.

submitTCtoDB(updateTagForm:any){
  for(let i=0;i<this.selectedFileList.length;i++){

    let file=this.selectedFileList[i];
    this.readFile(file, (selectedFileList) => {
        this.submitTC(updateTagForm,selectedFileList);
     });

   }

 }

To determine if the file reading process is complete, you can check the FileReader.result property. It remains null until the reading operation is done.

As per the documentation on Mozilla:

A suitable string or ArrayBuffer based on the read method used. The value is null if the reading is incomplete or unsuccessful.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Solving an object in ui-router state using ui-sref

Dealing with a large JSON object in an Angular controller and wanting to pass it to the controller of a template that will be displayed in a ui-view. I am aware that parameters can be passed to states using ui-sref, but I do not want this object to be visi ...

A peaceful WCF service initiates a client callback whenever a server update occurs

In the process of developing a WCF RESTFUL service on top of a c++ console application, I am confronted with an issue. The client accesses this c++ application through my restful wcf service using a browser. Every time there is an update received by my w ...

What is the best way to create a JavaScript animation for altering the width of a div element?

Need help with creating a dynamic poll chart based on YES and NO votes? Check out this project where you can visually see the results by clicking HERE. Looking to add some animation effects to your poll? You can achieve a smooth transition using CSS with ...

Transferring information between two distinct components

I am facing an issue where I have a list of stores shown in an unordered list, and when this list is initialized the ngOnInit() function retrieves data for all the stores. However, I want to be able to send the store data from each list element to the stor ...

What are some strategies for validating form fields in the Back-End and displaying them in Angular7?

My plan is to develop the backend of my app using Spring Boot and the frontend using Angular. I want to ensure the security of the form field information by validating it on the backend side. To get started, I created a model called Visitor.java with the f ...

Retrieving location data using the Google Maps geocoder

Could someone help me with this issue in my code? function getLocationName(latitude, longitude) { if (isNaN(parseFloat(latitude)) || isNaN(parseFloat(longitude))) { return false; } var locationName; var geocoder = new google.maps. ...

The sweetalert 2 input field is unresponsive or disabled within a materializecss modal, making it impossible to type in

My modal includes a SweetAlert2 popup when I click the "add bills" button. The code for this feature is from their documentation, so I don't believe the issue lies there. However, I am experiencing a problem where the input field is not type-able and ...

What could be the reason for event.stopPropagation() not functioning properly with a switch statement

Could you please explain why the function event.stopPropagation() is not working on the switch element? Whenever I click on the switch, it prints the console log for the switch. However, when I click on the surrounding area (row), it logs the row event in ...

Troubleshooting issues with AngularJS $watch not triggering properly

Even though Deep watch has been activated in the factory, it is not triggering. What steps can be taken to resolve this issue and ensure that an event is triggered when the 'name' value changes? Javascript Code: var app = angular.module('a ...

How do I inform Jest that spaces should be recognized as spaces?

Here is some code snippet for you to ponder: import { getLocale } from './locale'; export const euro = (priceData: number): string => { const priceFormatter = new Intl.NumberFormat(getLocale(), { style: 'currency', currenc ...

Having success loading JSON with AJAX in a local browser, however encountering issues when attempting to do so within the PhoneGap

When I try to load external JSON-data locally in my browser, it displays the data successfully. However, when using a cloud-based build service like PhoneGap for iOS and Android apps, the page loads but without the JSON-data appearing. Can anyone provide a ...

Firefoxx unable to communicate with server through ajax requests

My dilemma involves transmitting data to my server using the json data type with ajax. Oddly enough, in Firefox the server fails to receive any data at all, while in Chrome and IE the data is successfully transmitted and displayed on the server console. H ...

Trouble with displaying ChartsJS Legend in Angular11

Despite thoroughly researching various documentation and Stack Overflow posts on the topic, I'm still encountering an odd issue. The problem is that the Legend for ChartsJS (the regular JavaScript library, not the Angular-specific one) isn't appe ...

Troubleshooting: Vue.js component events not being detected in TypeScript

I'm encountering an issue with receiving events from a barcode reader, which I heavily referenced from a GitHub repository. The problem lies in the fact that the events emitted by the BarcodeScanner component are not being captured by the enclosing c ...

What is the best way to access external value in an Angular directive?

check out this plunker link. HTML: <body ng-app="app"> <h1>selectable</h1> <selectable text="link1" status="true"></selectable> <selectable text="link2" status="false"></selectable> <p> ...

One important rule to remember when using React Hooks is that they must be called consistently and in the correct order in each render of the component. It

Encountering an issue while trying to use the ternary operator to determine which React Hook to utilize. The error message states: "React Hook "useIsolationDynamicPhase" is called conditionally. React Hooks must be invoked in the same order during every co ...

Connect and interact with others through the Share Dialogues feature in the

Update - Edit I'm just starting to explore the concept of share dialogues and I want to integrate it into my website. On my site, there is a reaction timer game that shows the user's reaction time in seconds in a modal popup. I want users to be ...

What changes should I make to my save function in order to handle both saving and editing user information seamlessly?

My goal for the save function is to achieve two tasks: 1. Save user in table - Completed 2. Update user in table - In progress Save function snippet: var buildUser = function () { $('#save').click(function () { var newUser = {}; ...

Manually detecting changes in the query string using AngularJS

My AngularJS application includes an edit form with a routing URL like app/edit/:id. When I navigate to app/edit/5, I am able to edit the object with ID 5. However, if I manually change the URL to app/edit/6, the application loads the object with ID 6 in ...

How to integrate a chips feature in Angular 4 using Typescript

Struggling to incorporate a chips component into my Angular web application, which comprises Typescript, HTML, and CSS files. After grappling with this for weeks without success, I have yet to find the right solution. To review my current code, you can a ...