Swapping items within Angular's forEach()

Question

Swapping items within Angular's forEach()

I am working with an array of objects and using a forEach() function in my code. Here is the structure:

$scope.things = [
    {x: 2},
    {x: 4},
    {x: 5}
];

angular.forEach($scope.things, function(thing) {

    //You can uncomment one line at a time

    //thing.x += 10;         // <--- works
    //thing.k = thing.x + 1; // <--- works
    //thing = {k: thing.x + 10, o: thing.x - 1};  // <--- doesn't work

});

console.log($scope.things);

When I say "works", it means:

x gets incremented by 10, resulting in {x: 12}, {x: 14}, {x: 15}
k property is added to each object, resulting in
```
{x: 2, k: 3}, {x: 4, k: 5}, {x: 5, k: 6}
```
The original object remains unchanged even if modifications are made.

My queries are:

What is the reason behind this behavior?
Is this the expected outcome?
How can I replace each object entirely in the array?

javascript arrays angularjs

Answer 1

Answer №1

What could be the reason for this occurrence?

This situation arises because the variable thing is simply a placeholder. You have the flexibility to reassign the value of a variable, including a parameter variable, without impacting the values stored in an object.

Is this behavior what you anticipated?

Absolutely.

How can I fully substitute each instance of thing?

To alter the value of an object's property, you must specifically target it during assignment. The forEach iterator function receives value, key, and obj as parameters. By referencing the object along with its property name, you can execute

obj[key] = { whatever: "you desire" }

to modify the property's value.

angular.forEach($scope.things, function(thing, key, things) {

    //Execute only one line at a time

    //thing.x += 10;         // <--- works
    //thing.k = thing.x + 1; // <--- works
    //thing = {k: thing.x + 10, o: thing.x - 1};  // <--- doesn't work

    //things[key] = {k: thing.x + 10, o: thing.x - 1}; // <--- works!
});

Answer 2

What could be the reason for this occurrence?

This situation arises because the variable thing is simply a placeholder. You have the flexibility to reassign the value of a variable, including a parameter variable, without impacting the values stored in an object.

Is this behavior what you anticipated?

Absolutely.

How can I fully substitute each instance of thing?

To alter the value of an object's property, you must specifically target it during assignment. The forEach iterator function receives value, key, and obj as parameters. By referencing the object along with its property name, you can execute

obj[key] = { whatever: "you desire" }

to modify the property's value.

angular.forEach($scope.things, function(thing, key, things) {

    //Execute only one line at a time

    //thing.x += 10;         // <--- works
    //thing.k = thing.x + 1; // <--- works
    //thing = {k: thing.x + 10, o: thing.x - 1};  // <--- doesn't work

    //things[key] = {k: thing.x + 10, o: thing.x - 1}; // <--- works!
});

Swapping items within Angular's forEach()

Answer №1

Similar questions

Shared variables in Node.js allow for multiple users to access different entry points simultaneously

What could be causing the issue with running npx create-react-app my-first-app?

Guide to reversing the sequence of characters forming a sentence

Is array.length access cached by NodeJS?

The appearance of the logout button may differ depending on the web browser being used

Include an additional capital letter at the beginning of each new item in ng-repeat

Attempting to modify the background color of an iFrame in Internet Explorer

Problem with Angular's ng-repeat functionality

The jQuery UI Tab is failing to scroll within its container

Steps for enabling (almost) unidirectional communication from a client to a server

Guide to forming an array by extracting specific properties from a nested JSON array using javascript

ReactJS - Element not specified

What location is ideal for making API calls with React and Redux-thunk?

Arduino's innovative 3-dimensional array technology

Arrange the array based on the order of the enumeration rather than its values

Is there a way to locate a parent class starting from a child class, and subsequently track down another child class from the parent?

Combining ServiceStack with MVC and AngularJs for optimal integration

encountering difficulty with loading JavaScript code while customizing form fields in Symfony/Sonata Admin

Is there a way to prevent jshint errors related to global variables in my web file?

Sending data to a server using the select element within a form