You should only call them after the method that returns a promise has completed

submitTCtoDB() {
  console.log("The selected file list contains:  " + this.selectedFileList)
  this.readFile().then(() => {
    alert("ReadFile has finished, now submitting TC");
    this.submitTC()
  });
}

readFile() {
  return new Promise((resolve, reject) => {
    for (let i = 0; i < this.selectedFileList.length; i++) {
      let file = this.selectedFileList[i];
      alert("File in readFile: " + file.name)
      let fileReader = new FileReader();
      fileReader.onload = () => {
        this.fileContent = fileReader.result;
        if (this.fileContent.indexOf("END DATA | BEGIN RESULTS") != -1) {
          alert("Multiple test cases found in the file " + file.name + ". Please separate/save the test cases in Calc Builder and then reimport.");
          const index: number = this.selectedFileList.indexOf(file);

          if (index > -1) {
            this.selectedFileList.splice(index, 1);
          }

          console.log(this.fileContent);

        }
        resolve(this.fileContent);
      }
      fileReader.readAsText(file);
    }
  });
}

I am encountering an issue where the submitTC() method is being invoked prematurely, before the readFile() method has completed. I suspect that the use of .then() inside the submitTCtoDB() method is causing this problem.

It seems like there may be an error in the way .then() or promises are being utilized in this context.

The desired functionality is to ensure that the submitTC method is only called once the readFile method has finished reading and processing all the files. Any assistance would be greatly appreciated.

Answer №1

If you have a resolve call within a loop, keep in mind that resolve only takes effect the first time it is called. Once a promise resolves, it reaches its final state, and the then callbacks are executed. This occurs when the very first file is read, regardless of the status of other files in the queue.

To improve this situation, consider the following actions:

  • Convert the FileReader into a promise without introducing specific conditional logic (such as the if check) inside it. This keeps the function generic.
  • Utilize Promise.all to map the file list to a new promise that will provide a list of file contents.
  • Analyze the list of contents for specific requirements.
  • Send the new promise (either from Promise.all or a chain linked to it) back to the caller.

Here is the revised code snippet:

submitTCtoDB() {
    console.log("this.selectedFileList is:  " + JSON.stringify(this.selectedFileList))
    this.readFileList(this.selectedFileList).then((validList) => {
        alert("ReadFile Finished now submit TC");
        this.selectedFileList = validList;
        this.submitTC()
    });
}

readFileList(list) {
    return Promise.all(list.map(file => this.readFile(file))).then(contents => {
        return list.filter((file, i) => {
            const fileContent = contents[i];
            if (fileContent.indexOf("END DATA | BEGIN RESULTS") != -1) {
                console.log("Multiple testcases found in " + file.name + " file.  Please separate/save testcases in Calc Builder. Then reimport");
                console.log(fileContent);
                return false; // exclude this file
            }
            return true; // include this file
        });
    });
}

readFile(file) {
    return new Promise(resolve => {
        console.log("file in promiseFile: " + file.name);
        const fileReader = new FileReader();
        fileReader.onload = () => resolve(fileReader.result);
        fileReader.readAsText(file);
    });
}

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

Angular 2 Encounter Error When Trying to Access Undefined Property in a Function

Element: import { Component, OnInit } from '@angular/core'; import { HttpClient } from '@angular/common/http'; @Component({ selector: 'app-ore-table', templateUrl: './ore-table.component.html', styleUrls: [&a ...

Is there a way to activate and change the color of a Radio Button when it is clicked?

Is there a way to change the background-color of a clicked Radio Button so it appears highlighted? For example, when the first choice is clicked, I want it to stand out visually. This is the current UI displaying the choices: https://i.stack.imgur.com/a7 ...

Ensuring Consistent Height for Bootstrap Card Headers

I am currently working with bootstrap cards on two different web pages. The challenge I am facing is that on one page, the header text has a fixed height so I can easily match their card-header height using min-height. However, on the second page, the card ...

Why is the lifecycle callback not being triggered?

I am currently learning how to develop with Vue.js. I have been trying to use the lifecycle callbacks in my code. In my App.vue file, I have implemented the onMounted callback. However, when I run the code, I do not see the message appearing in the consol ...

Utilizing Angular to integrate with an external API

I have encountered an issue while trying to connect to the Expedia API. In order to do so, I need an API key and ID. Initially, I utilized JSONP for this connection but ran into a bug causing problems. Additionally, storing my API key in JavaScript poses ...

Troubleshooting Vue.js Error: Uncaught ReferenceError - jQuery Undefined

I'm a beginner with Vue.js and I'm attempting to develop a custom component that utilizes the jQuery formBuilder plugin from formBuilder. However, when I try to include this component file within another component, an error occurs: Uncaught Re ...

Is it common practice to provide a callback function as a parameter for an asynchronous function and then wrap it again?

app.js import test from "./asyncTest"; test().then((result)=>{ //handle my result }); asyncTest.js const test = async cb => { let data = await otherPromise(); let debounce = _.debounce(() => { fetch("https://jsonplaceholde ...

Managing various encoding methods when retrieving the XML data feed

I'm attempting to access the feed from the following URL: http://www.chinanews.com/rss/scroll-news.xml using the request module. However, the content I receive appears garbled with characters like ʷ)(й)޹. Upon inspecting the XML, I noticed that ...

Show the current Date and Time dynamically using only one line of JavaScript code

After running this command, I encountered an issue: $("#dateTime").text(new Date().toLocaleString()); The result displayed was 2/21/2020, 10:29:14 AM To make the time increase every second, I attempted this code: setInterval($("#dateTime").text(new Dat ...

There was a problem with Type TS2507: The Type 'typeof Tapable' cannot be used as a constructor function type

After creating my own TypeScript library for shared TS models, I wanted to incorporate it into a couple of other projects I'm working on. Here are the essential parts of the library repository: index.ts: export interface IApp { ... } package.json: ...

Using React Native with TypeScript to Select the Parent and Child Checkboxes within a FlatList

My objective is to ensure that when a user selects a checkbox for one of the parent items ('Non Veg Biryanis', 'Pizzas', 'Drinks', 'Desserts') in the flatlist, all corresponding child items should also be selected au ...

Emptying the data of a form that has been submitted using Ajax

None of the similar questions really address the issue from my perspective. I am facing a challenge with a user registration form where I utilize .post for ajax handling. Below is the code snippet: $('#register_user_form').submit(function(){ ...

What is the method to reach a named parameter within a function?

Currently, I am building a RESTful web service using Node JS in combination with Backbone JS. Within this service, there is a specific REST method called GET /users/id/:id, where :id represents the user's identification number. The purpose of this met ...

Performing an Angular 5 JSONP request using custom HttpHeaders

I'm attempting to make a JSONP request with specific HTTP header parameters. Using http.get makes it simple: let header = new HttpHeaders(); header.append(<header_param_name>, <header_param_value>); this.http.get(<my_url>, { header ...

Can the w regular expression pattern be modified to include special characters like é? If not, what other options are available?

Imagine having a regular expression that appears as follows: \w+ In this case, the string "helloworld" would be accepted: helloworld However, "héllowörld" would not pass the test: héllowörld The regex will stop at é (and also break atö) ev ...

Execute a PHP script to modify a section of a PHP file

I successfully implemented a piece of code into a PHP file by manually searching for the right section and inserting it. Now, I am looking to automate this process with an install script for my code. The ideal installation script would: 1. Copy the exist ...

What could be causing my Angular app to be unable to locate the embedded component?

This particular component is called HomeTabComponent and it is embedded here. @Component({ selector: 'app-home-tab', templateUrl: './home-tab.component.html', styleUrls: ['./home-tab.component.scss'] }) export class Ho ...

Drop items next to the specified keys. Vanilla JavaScript

I am trying to create a new array of objects without the gender field. Can you identify any mistakes in my code? let dataSets = [ { name: "Tim", gender: "male", age: 20 }, { name: "Sue", gender: "female", age: 25 }, { name: "Sam", gender: "m ...

JavaScript element styling in a Partial view, experiencing issues with functionality

In the main view, the javascript element is working fine. However, in the partial view it seems to not be functioning even though it is correctly formatted. Any ideas on how to fix this issue? Check out this fiddle for reference: http://jsfiddle.net/bgrin ...

My attempts to load the .mtl and .obj files using THREE.js have been unsuccessful

I've been working on creating a 3D model viewer using three.js, but I'm encountering issues with loading .mtl and .obj files. Despite following a tutorial at , the only model that loads successfully is the female one. Here is the code snippet I ...