Javascript don't want to change object value in loop

Question

I need send the objects to api. But I need to change one value of the object in every step of the loop.

this.task = {
    RowId: 0
};

var taskWithFid = [];
var fids = [1,2,3,4,5];
var taskTemp = this.task;

fids.map(function(fid){                    
    taskTemp.RowId = fid;
    taskWithFid.push(taskTemp);
}.bind(this));

I expect taskWithFid array like this:

[
    { RowId: 1 },
    { RowId: 2 },
    { RowId: 3 },
    { RowId: 4 },
    { RowId: 5 }
]

But I get this:

[
    { RowId: 5 },
    { RowId: 5 },
    { RowId: 5 },
    { RowId: 5 },
    { RowId: 5 }
]

Can you help me with that?

Here is the code:

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <link rel="stylesheet" href="style.css">
        <script data-semver="1.2.13" src="http://code.angularjs.org/1.2.13/angular.js" data-require="[email protected]"></script>
    <script src="script.js"></script>
  </head>

  <body ng-controller="MainCtrl as item">

    <h1>Hello Plunker!</h1
    <div>{{item.taskWithFid}}</div>  
  </body>

</html>

Welcome to Stack Overflow! I edited your question to properly format the code fragments. I also included the piece of code from the external site within the question. Good luck! — Wtower
– Wtower, Commented Sep 2, 2015 at 7:58

Aston · Accepted Answer · 2015-09-02 07:55:28Z

1

The problem is that you are pushing the same object into an array, and while doing so you are changing it's RowId. So in the end, when you change it to 5, all will be 5. You need to create separate objects:

fids.map (function(fid) {                    
  taskWithFid.push({RowId: fid});
}.bind(this));

answered Sep 2, 2015 at 7:55

Aston

3,7321 gold badge23 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

michelem · Accepted Answer · 2015-09-02 07:55:20Z

0

It should be:

this.task = {
        RowId: 0
    };
var taskWithFid = [];
var fids = [1,2,3,4,5];
fids.map(function(fid){
 var taskTemp = {};
 taskTemp.RowId = fid;
 taskWithFid.push(taskTemp);
}.bind(this));

Move and change var taskTemp = this.task; to var taskTemp = {};

answered Sep 2, 2015 at 7:55

michelem

14.6k5 gold badges55 silver badges67 bronze badges

Comments

Saurabh Ahuja · Accepted Answer · 2015-09-02 08:06:18Z

0

var taskWithFid = [];
var fids = [1,2,3,4,5];
var taskTemp  
fids.map(function(fid){
this.task = {
        RowId: 0
    };
taskTemp =this.task;                    
 taskTemp.RowId = fid;
 taskWithFid.push(taskTemp);
}.bind(this));
console.log(taskWithFid);

answered Sep 2, 2015 at 8:06

Saurabh Ahuja

4733 silver badges13 bronze badges

1 Comment

Gerald Versluis Over a year ago

Although this might be a good answer, please consider adding some more explanation about why this is the right solution and what exactly you are doing :)

gaurav bhavsar · Accepted Answer · 2015-09-02 08:07:54Z

0

Your this.task is override each time when you change RowId

move your task inside .map with new variable as var task { // code } , so its create new variable each time.

Here is working flunker

fid.map() should be like :

fids.map(function(fid){

    var task = {
        DateCreated: now.toJSON(),
        RowId: 0,
        Subject: null
    };
    task.RowId = fid
    this.taskWithFid.push(task);
    console.log('fid: '+fid);
}.bind(this));

answered Sep 2, 2015 at 8:07

gaurav bhavsar

2,0512 gold badges26 silver badges36 bronze badges

Comments

Beroza Paul · Accepted Answer · 2015-09-02 09:36:40Z

0

Here is the right reason
In Javascript objects and arrays are pushed by reference. Objects and arrays not are pushed as copy.

In your code when you are doing following lines you are simply pushing object reference to array.

taskTemp.RowId = fid;
taskWithFid.push(taskTemp);

At the end the last value is changing all values because of this reference.

Solution
We just need to create a separate object every time we push. Most of the answers are correct here. But still following is my solution:

fids.map(function(fid){                    
    this.taskWithFid.push({RowId: fid});
    console.log('fid: '+fid);
}.bind(this));

edited Sep 2, 2015 at 9:36

answered Sep 2, 2015 at 9:06

Beroza Paul

2,1271 gold badge16 silver badges17 bronze badges

Collectives™ on Stack Overflow

Javascript don't want to change object value in loop

5 Answers 5

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related