cannot iterate through array and change value in JS

Question

I have to iterate through an array, change one of its values, and create another array refelecting the changes.

this is what I have so far:

JS:

var arr = new Array();

        arr['t1'] = "sdfsdf";
        arr['t2'] = "sdfsdf";
        arr['t3'] = "sdfsdf";
        arr['t4'] = "sdfsdf";
        arr['t5'] = "sdfsdf";

        var last = new Array();

        for (var i = 0; i <= 5; i++) {
            arr['t2'] = i;
            last.push(arr);
        }

        console.log(last);

Unfortunately, these are my results

enter image description here

As you can see, I am not getting the results needed as 0,1,2.. instead I am getting 2, 2, 2.. This is what i would like my results to be:

enter image description here

How can I fix this?

Arrays in javascript do not use textual indexes (meaning no associative arrays). What you are actually doing is adding properties onto the array object and not adding elements to the array. — Patrick Evans, Oct 17 '14 at 19:05
can you please provide me with an answer that shows code so that I can give it a try? — CodeGodie, Oct 17 '14 at 19:09
possible duplicate of [Dynamically creating keys in JavaScript associative array](http://stackoverflow.com/questions/351495/dynamically-creating-keys-in-javascript-associative-array); specifically [this answer](http://stackoverflow.com/a/351723/7469) covers it. — Evan Davis, Oct 17 '14 at 19:14

score 4 · Accepted Answer · edited Mar 22 '15 at 16:17

4

You have to make a copy, otherwise you are dealing with reference to the same object all the time. As it was said before - javascript does not have associate arrays, only objects with properties.

var arr = {}; // empty object

arr['t1'] = "sdfsdf";
arr['t2'] = "sdfsdf";
arr['t3'] = "sdfsdf";
arr['t4'] = "sdfsdf";
arr['t5'] = "sdfsdf";

var last = new Array();

for (var i = 0; i <= 5; i++) {
   var copy = JSON.parse(JSON.stringify(arr)); //create a copy, one of the ways
   copy['t2'] = i;  // set value of its element
   last.push(copy); // push copy into last
}

console.log(last);

ps: you can use dot notation arr.t1 instead of arr['t1']

edited Mar 22 '15 at 16:17

edelans

8,479
4
36
45

answered Oct 17 '14 at 19:15

Cheery

16,063
42
57

Finally someone tries to help me here instead of criticizing. I will give your answer a shot. Thank you. – CodeGodie Oct 17 '14 at 19:17
I tried you answer but the result loses the information in t1,t3,t4,t5. – CodeGodie Oct 17 '14 at 19:21

Tobias81 · Answer 2 · 2014-10-17T19:36:57.240

1

The array access with ['t2'] is not the problem. This is a regular JavaScript feature.

The problem is: You are adding the SAME array to "last" (5 times in code, 3 times in the screenshot). Every time you set ['t2'] = i, you will change the values in "last" also, because they are actually just references to the same array-instance.

You must create a copy/clone of the array before you add it to "last".

This is what will happen in all languages where arrays are references to objects (Java, C#...). It would work with C++ STL though.

edited Oct 17 '14 at 19:36

answered Oct 17 '14 at 19:22

Tobias81

1,820
1
16
17

thank you for your answer. I am normally a PHP programmer and its probably why I came across this bump. I will take your advice into consideration. – CodeGodie Oct 17 '14 at 19:24

cannot iterate through array and change value in JS

2 Answers2