Commitment and the worth of pointing

Question

Commitment and the worth of pointing

I am trying to create a promise chain in Angular to execute a series of queries:

           for(variableIndex in _editableVariable.values) {
                var v = _editableVariable.values[variableIndex];
                if(v.value != v.old_value) {
                    console.log('v', v);
                    var newVariableRes = new VariableValueRes(v);
                    if(v.old_value == undefined) {
                        p.then(function() {
                            console.log('B', newVariableRes);
                            return newVariableRes.$save().$promise;
                        });
                    } else {
                        console.log('Try update: ', v);
                        p.then(function() {
                            console.log('C', newVariableRes);
                            return newVariableRes.$update().$promise;
                        });
                    }
                }
            }

However, I am encountering an issue when I output the console.log('v',v), which shows different value for each variable. Inside the promise, when I output the console.log('B', newVariableRes), the content of newVariableRes is always the value of the latest variable.

Example Output:

v 
Object {value: "1", old_value: undefined, platform: "/api/v1/platform/1", product_variable: "/api/v1/product_var/2"}
v 
Object {value: "2", old_value: undefined, platform: "/api/v1/platform/2", product_variable: "/api/v1/product_var/2"}
v 
Object {value: "3", old_value: "", id: 7, platform: "/api/v1/platform/3", product_variable: "/api/v1/product_var/2"}

B 
Resource {value: "3", old_value: "", id: 7, platform: "/api/v1/platform/3", product_variable: "/api/v1/product_var/2"…}
B 
Resource {value: "3", old_value: "", id: 7, platform: "/api/v1/platform/3", product_variable: "/api/v1/product_var/2"…}
C 
Resource {value: "3", old_value: "", id: 7, platform: "/api/v1/platform/3", product_variable: "/api/v1/product_var/2"…}

I am new to JavaScript and I believed that v is a reference to the value. So, when I pass v to VariableValueRes, it should hold that reference. Changing the reference of

v</code should not affect the content of <code>VariableValueRes

.

Where could be the source of my misunderstanding?

javascript angularjs promise

Answer 1

Answer №1

One issue to consider is the scope in JavaScript, which is either global or function-based. This means that variables like v and newVariableRes declared within a for loop are treated as if they were declared at the top of the surrounding function.

During each iteration of the loop, the value of v is updated and logged immediately, reflecting the expected value. However, once the promise callbacks are executed, the loop has already completed, causing v and newVariableRes to hold the last assigned values.

These callbacks utilize newVariableRes through closure, allowing them to access the value from the outer scope even after the outer function has finished. This can lead to common mistakes in JavaScript code.

To resolve this issue, it is recommended to encapsulate the variable within a new function scope. One approach is to create a function and pass the variable as a parameter, ensuring that the callback uses the correct value:

p.then((function(nvr) {
    return function() {
        console.log('B', nvr);
        return nvr.$save().$promise;
    };
})(newVariableRes));

Alternatively, when using Angular, replacing the for loop with angular.forEach can also solve the problem by maintaining the expected value of v in the callbacks. This way, you can create new VariableValueRes(v) within the callbacks without worrying about the reference to newVariableRes.

Answer 2

One issue to consider is the scope in JavaScript, which is either global or function-based. This means that variables like v and newVariableRes declared within a for loop are treated as if they were declared at the top of the surrounding function.

During each iteration of the loop, the value of v is updated and logged immediately, reflecting the expected value. However, once the promise callbacks are executed, the loop has already completed, causing v and newVariableRes to hold the last assigned values.

These callbacks utilize newVariableRes through closure, allowing them to access the value from the outer scope even after the outer function has finished. This can lead to common mistakes in JavaScript code.

To resolve this issue, it is recommended to encapsulate the variable within a new function scope. One approach is to create a function and pass the variable as a parameter, ensuring that the callback uses the correct value:

p.then((function(nvr) {
    return function() {
        console.log('B', nvr);
        return nvr.$save().$promise;
    };
})(newVariableRes));

Alternatively, when using Angular, replacing the for loop with angular.forEach can also solve the problem by maintaining the expected value of v in the callbacks. This way, you can create new VariableValueRes(v) within the callbacks without worrying about the reference to newVariableRes.

Commitment and the worth of pointing

Answer №1

Similar questions

Enhance your Vue.js 3 tables with sorting, filtering, and pagination capabilities using this custom component

Ways to initiate a transition upon clicking a button, causing it to switch from being hidden (`display: none`) to visible (`display: block`)

What is the best way to extract the information from the checkbox in a MUI datatable?

Trouble mapping an array of objects in ReactJS

Leverage the power of AJAX for searching in Laravel 5.3

What is the process for incorporating a custom attribute into an element with Vue directives?

Error with encoding Uri segments in angular-resource.js

Error message: "Property undefined when Angular attempts to call a function from jQuery/JavaScript."

What is the best way to save a multi-line text file - should it be stored as a regular text file or as a

Integrate PHP include files into a website without allowing direct access, then dynamically load them using jQuery AJAX

Attempting to modify the background hue of a Bootstrap 5 Button using javascript

Issue with Pop Up not redirecting correctly after a successful login in Azure AD

Deactivate certain choices in React Select

Having trouble retrieving the variable from a newly created filter in an ng-repeat loop in AngularJS

Encountering a build error with Ubuntu, Node-Gyp, and Canvas – help needed!

In need of assistance with filtering lists using JQuery

Stop users from being able to select or highlight text within a content editable div

When trying to use routes with the .map() function, it does not seem

Displaying empty values as zeros

Error detected in JSON syntax... Where is it hiding?