When trying to update a variable within the then() method of a Promise, the variable does not reflect

Question

When trying to update a variable within the then() method of a Promise, the variable does not reflect

While the console.log inside the for loop successfully prints project with the correct updated attributes for both role and user within the proposer object, it seems that once outside of the loop, the changes are not retained. At that point, all I see is an empty project. How can I ensure that the modified project data persists beyond the loop?

project: Project = {
    course: '',
    title: '',
    description: '',
    proposer: [{role: '', user: ''}],
    approved: false,
    responsible: [{role: '', user: ''}],
    advisor: [{role: '', user: ''}],
    examiner: [{role: '', user: ''}],
    student: [] 
};


populateSchema() {
    var proposerFound = false;

    for (var key in this.project.proposer) {
      this.employeeService.getEmployee(this.project.proposer[key].user)
                      .then((employee: Employee) => {
                        if (employee != null) {
                          proposerFound = true;
                          this.project.proposer[key].role = 'Employee';
                          this.project.proposer[key].user = employee._id;

                          console.log(this.project); // updated attributes
                        }
      });
}


console.log(this.project); // NOT updated attributes, empty

javascript angular typescript

Answer 1

Answer №1

Performing an update within a promise's then block can sometimes cause timing issues. It is important to ensure that your code executes in the correct sequence for expected results.

Consider this revised approach:

updateSchema() {
    var userFound = false;
    var promises: Promise<void>[] = [];

        for (let key in this.project.users) {
            promises.push(this.userService.getUser(this.project.users[key].id)
            .then((user: User) => {
                if (user != null) {
                    userFound = true;
                    this.project.users[key].role = 'User';
                    this.project.users[key].id = user._id;

                    console.log(this.project); // updated data
                }
            }));
    }

    Promise.all(promises).then(() => {
        console.log(this.project);
    });
}

Answer 2

Performing an update within a promise's then block can sometimes cause timing issues. It is important to ensure that your code executes in the correct sequence for expected results.

Consider this revised approach:

updateSchema() {
    var userFound = false;
    var promises: Promise<void>[] = [];

        for (let key in this.project.users) {
            promises.push(this.userService.getUser(this.project.users[key].id)
            .then((user: User) => {
                if (user != null) {
                    userFound = true;
                    this.project.users[key].role = 'User';
                    this.project.users[key].id = user._id;

                    console.log(this.project); // updated data
                }
            }));
    }

    Promise.all(promises).then(() => {
        console.log(this.project);
    });
}

When trying to update a variable within the then() method of a Promise, the variable does not reflect

Answer №1

Similar questions

Error encountered with npm version 5.8.0 while trying to create a new project using ng new

Approach to dividing PHP output into multiple outputs (AJAX, PHP) (nested AJAX requests, AJAX inside AJAX loop?)

Utilizing Express-WS app and TypeScript to manage sessions

Identifying Whether Angular ng-repeat is Displaying Output or Not

Incorporating interactive buttons within Leaflet popups

What's the process for validating i18n dictionaries using TypeScript?

Is the input field not properly centered on the page?

Retrieving attributes by their names using dots in HTML

What strategies can be implemented to effectively share code between these two methods?

Ways to identify whether the ajax error is due to Access-Control-Allow-Origin restriction or if the file is genuinely absent

Efficiently integrating new API objects into an array of existing objects in React using Typescript without any duplicates

What causes the validation behavior of Angular 8's ngValue to differ when compared to other situations?

Changing all object values to true with React useState

Error message: "Despite using the 'use client' function in Next.js, a ReferenceError occurs as 'window' is undefined."

Troubleshooting the issue of the Delete Service not functioning properly within Angular

No errors are being displayed with the React Hook Form using Zod and Material UI

Fixing the error "Type 'unknown' is not a valid index type"

Unable to obtain Braintree client token using AngularJS

What is the best way to extract data from a JavaScript object received from multer?

jQuery Validation Plugin Failing to Recognize Correct Input