Javascript is saving wrong variables

Question

I'm trying to make a dynamic object that is saving a title and a score from HTML page after the object is done I'm saving it into an array to make it easier for later.

I have a problem when I'm assigning object into array like this:

for (let j = 0; j < array.length; j++) {
    for (let i = 0; i < 6; i++) {
                                /*getting result as a number from HTML page (example: 8/10, result = 8)*/
        if (j == 0) {
            result += Number(score[i].innerHTML.replace('/10', ''));
        } else {
            result += Number(score[i + (x * j)].innerHTML.replace('/10', ''));
    }

          /*making result on 1 decimal place (example = 9.2)*/
result = (Math.round((result / 6) *10)) / 10;

objNum.result = result;
objNum.title = title[j].innerHTML;
scoreNum[j] = objNum;

console.log(objNum);           /*returns objects with correctly assigned values each time, it displays the right thing*/
}

After the loop is done:

    console.log(scoreNum); 
/*returns: */
    
[{
    title: "The Rising of the Shield hero",
    result: 8.5
}], [{
    title: "The Rising of the Shield hero",
    result: 8.5
}], [{
    title: "The Rising of the Shield hero",
    result: 8.5
}], [{
    title: "The Rising of the Shield hero",
    result: 8.5
}], [{
    title: "The Rising of the Shield hero",
    result: 8.5
}], [{
    title: "The Rising of the Shield hero",
    result: 8.5
}], [{
    title: "The Rising of the Shield hero",
    result: 8.5
}]

What it is supposed to return:

    [{
        title: "Nanatsu no taizai (7 deadly sins)",
        result: 9.2
    }], [{
        title: "One punch man",
        result: 8.8
    }], [{
        title: "No Game No Life",
        result: 9.7
    }], [{
        title: "Darling in the FranXX",
        result: 8.2
    }], [{
        title: "Sword Art Online",
        result: 7.7
    }], [{
        title: "Demon king academy",
        result: 9.0
    }], [{
        title: "The Rising of the Shield hero",
        result: 8.5
    }]

When I call out objNum in loop id displays the right thing, but when I want to assign it into an array because it will be much easier to work with, it assigns the last thing into all slots in array.

Thanks, Siro

Edit

After adding a line of code on the end of the loop:

objNum = {title: "", result: 0}

It still didn't work, so I've restarted a PC and suddenly it worked.

Instead of this: ‘scoreNum[j] = objNum;’ try pushing it instead: ‘scoreNum.push(objNum)’ — imvain2
– imvain2, Commented Oct 9, 2020 at 14:20

trincot · Accepted Answer · 2020-10-09 14:22:03Z

1

You only use one object objNum. All you do is change its properties in the loop, but that is still the same object. So you end up referencing that same object multiple times in your scoreNum array.

Instead, create a new object in each iteration, and store that object in your array.

Change:

objNum.result = result;
objNum.title = title[j].innerHTML;
scoreNum[j] = objNum;

To:

scoreNum[j] = { // create a new object on the spot
    result,
    title: title[j].innerHTML
};

Follow up

In the later edit to your question you do create a new object with:

objNum = {title: "", result: 0}

So if that statement is placed within the loop, the problem no longer occurs.

NB: rebooting your PC has no effect on how this runs.

edited Oct 9, 2020 at 14:22

answered Oct 9, 2020 at 14:16

trincot

357k38 gold badges282 silver badges338 bronze badges

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

Collectives™ on Stack Overflow

Javascript is saving wrong variables

1 Answer 1

Follow up

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Follow up

Comments

Your Answer

Sign up or log in

Post as a guest

Related