For Loop Appending Object Multiple Times in Javascript

Question

I have the following code.

const timeLabels = [
    { name: "1:00 AM", present: true, label: ["1:00", "2:00"], value: "1:00" },
    { name: "2:00 AM", present: true, label: ["2:00", "3:00"], value: "2:00"},
    { name: "3:00 AM", present: true, label: ["3:00", "4:00"], value: "3:00" },
];

const targetedTimes = [["0:00", "1:00"], ["1:00", "2:00"]]
  
    let actualTime = [];

    console.log("getting time");
    console.log("start: the actualTime is", actualTime);
    for (var j = 0; j < timeLabels.length; j++) {
        console.log("x");
        var currItem = timeLabels[j];
        var label = JSON.stringify(currItem.label);
        var adTime = JSON.stringify(targetedTimes);
        if (adTime.indexOf(label) >= 0) {
            currItem.present = true;
        } else {
            currItem.present = false;
        }
        console.log("the current item is", currItem);
        actualTime.push(currItem);
        console.log("The actual time is", actualTime);
    }

On the FIRST iteration, the currItem is

{name: "1:00 AM", present: true, label: Array(2), value: "1:00"}

But the actualTime is

   [{name: "1:00 AM", present: true, label: Array(2), value: "1:00"}, 
   {name: "2:00 AM", present: false, label: Array(2), value: "2:00"},
   {name: "3:00 AM", present: false, label: Array(2), value: "3:00"}]

Why would the actualTime list have three values when I only append 1 on the first iteration?

Wait, what about the `console.log` before the for-loop? What does it log? — Zeke, Oct 29 '17 at 03:28
@HyperNeutrino can you elaborate why when I console.log the currItem it shows 1 item, but when I actually push it to the list, it appends 3 items on the first iteration? — lost9123193, Oct 29 '17 at 03:30
@lost9123193 Well you see it's not appending three items on the first iteration, that's the last iteration (console.log might be collapsing the similar items, I don't know). — hyper-neutrino, Oct 29 '17 at 03:31
@HyperNeutrino hmm i'm not sure if that makes sense, the console.log is IN the for loop, so it should show all iterations. On it's first loop I get the issue I've shown above. — lost9123193, Oct 29 '17 at 03:33
@lost9123193 are you opening the console before or after running? see the answer btw — hyper-neutrino, Oct 29 '17 at 03:33
On a 5th look, it all looks good. If the log before the loop is actually an empty array, maybe jsFiddle is just being weird. — Zeke, Oct 29 '17 at 03:35
I'm doing both and both do not work. This also does not run properly on my project. — lost9123193, Oct 29 '17 at 03:35
@Zeke Yeah I see. It wouldn't be an issue but it's actually affecting my code on my project which is why I'm stumped. — lost9123193, Oct 29 '17 at 03:35
By the way, is the semicolon missing by mistake when the constant is declared? That should’ve popped up as an error on any platform so I’m just making sure it’s a copy-paste issue... — Zeke, Oct 29 '17 at 03:38
Can you paste more code? You probably have another console.log later into the code and you are reading the result from that part — Chris, Oct 29 '17 at 03:42
@Chris this is actually the only code I use when the error happens. If you paste it in Jsfiddle I believe these results will be replicated — lost9123193, Oct 29 '17 at 03:44

score 1 · Accepted Answer · answered Oct 29 '17 at 16:41

What is happening is that the console is printing a reference to the object (becuase arrays are a type of object in javascript), so by the time you print it and read it in the console, each console.log statement is pointing at the same final array, which is why the values is the same each time.

Have a look at this similar StackOverflow question for more insight.

I tried running your script on node and it printed out the array correctly on each iteration, with only one item in the first iteration, so your code is fine.

For Loop Appending Object Multiple Times in Javascript

1 Answers1