0

I have a class in JS like this:

function configurationToken(){


this.setData= function(data){
    this.data=data;
};

this.configurationState=[];

this.analyse= function(){

#first loop to get an array called this.configurationState


#second loop to update this.configurationState 
#and put each updated state in array called trail.
for(var i=0;...;..){ 
this.configurationState[i].parameterValue = some number related to i 
this.PSTrail.push(this.configurationState);
}

#results in the final array
console.log(this.PSTrail);
}

}

the problem is the objects in this.PSTrail array are all the SAME, which means in the second loop, the code pushed "this.configurationState" without changing the parameterValue, anybody knows why?? Thanks!

P.W
  • 21
  • 7
  • 2
    because you push in the same object on every iteration. It is not a snapshot of the object, it is the same reference. – epascarello Apr 13 '18 at 15:19
  • Can you give us a better example with data preferably. I'm having a hard time understanding what this all is. – zfrisch Apr 13 '18 at 15:19
  • In the 2nd loop: before I push this.configurationState into this.PSTrail, I tried to change it with code "this.configurationState[i].parameterValue = some number related to i " and then push it into the final array. How come the configurationState did not change after that?? – P.W Apr 13 '18 at 15:22
  • You are pushing the same reference to the same object into the array. I am not sure you you expect it to be different in each index. `this.PSTrail.push(this.configurationState)` is putting a reference to the object, it is not a copy. – epascarello Apr 13 '18 at 15:24
  • Ok, thanks for pointing that out! Can you tell me how can I push the array with an updated object value? – P.W Apr 13 '18 at 15:26
  • So you want each index to be copies of it at that moment in time? – epascarello Apr 13 '18 at 15:26
  • https://stackoverflow.com/questions/597588/how-do-you-clone-an-array-of-objects-in-javascript – epascarello Apr 13 '18 at 15:27
  • It's easy to reproduce, and you should be careful about array logs: create an empty array, `console.log` it, then fill values. The logged array will not be empty, it will be in its final state. So array logs may not be representative of the array state at the moment you logged it. If you want an accurate display, create a deep copy and log the copy – Kaddath Apr 13 '18 at 15:28
  • I mean how can I update the original object and then push it into an array? dont know if I explained it well... – P.W Apr 13 '18 at 15:29
  • seems you already answered it , thanks! @epascarello – P.W Apr 13 '18 at 15:30

1 Answers1

0

this.PSTrail.push(this.configurationState); is pushing a reference to the object, so the console.log will display an array of the same object, over and over. If you want PSTrail to contain different objects for each entry, you need to make a copy for each push. I'd recommend using spread syntax: this.PSTrail.push({...this.configurationState});

If you aren't familiar with the technique, what this is doing is pushing a new object ({}), that contains all the same contents as this.configurationState (...this.configurationState).

ref = []
copy = []
obj = {}
for(var i=0;i<4;i++){ 
 obj[i] = i;
 ref.push(obj)
    copy.push({...obj})
}

console.log('ref result:',ref)
console.log('copy result:',copy)
wassona
  • 319
  • 1
  • 9
  • the results did not change after using the syntax this.PSTrail.push({...this.configurationState}); :( – P.W Apr 13 '18 at 15:49
  • Hmm. Maybe there is something I'm missing about working in the class. Sorry about that. I added some sample code to show what I was talking about, but if that didn't fix the issue I'm not sure what's wrong. – wassona Apr 13 '18 at 16:12