Pushing Object into array changes existing elements in array Javascript

Question

I'm trying to build a small quiz application and as part of it, I created a questions builder. What I'm trying is pushing all options into questions array to save corresponding options into each question.

Here is the code I'm trying

        var Question = { Questionid: 0, QuestionText: '', SectionId: 0, QuestionTime: 0, QuestionScore: 0, Mandatory: 0,Option:[] }
        var Option = { OptionId: 0, QuestionId: 0, OptionText: '', RightAnswer: '' };
        Question.Mandatory = $('#cb_mandatory').prop('checked') * -1;
        Question.Questionid = typeof ($('#div_question').data('QuestionId')) == 'undefined' ? 0 : $('#div_question').data('QuestionId');
        Question.QuestionScore = $('#txt_question_score').val();
        Question.QuestionText = $('#txt_question').val();
        Question.QuestionTime = $('#txt_question_time').val();
        Question.SectionId = $('#dd_section').val();
        //
        $('.my-options').each(function (index, item) {
            Option.OptionId = typeof ($(item).data('OptionId')) == 'undefined' ? 0 : $(item).data('OptionId');
            Option.OptionText = $(item).find('input:text').val();
            Option.QuestionId = typeof ($('#div_question').data('QuestionId')) == 'undefined' ? 0 : $('#div_question').data('QuestionId');
            Option.RightAnswer = +$(item).find(':radio').is(':checked');

            Question.Option.push(Option);
        });

        alert(JSON.stringify(Question));

Here when I checked the final alert, all the array elements are same as the last element. But when I put an alert inside the loop of each options, it looks different.

So what I guess is when changing the Options object inside the loop, those already pushed into array also gets changed.

So how can I solve this issue? I mean I need to avoid changing those already pushed into the array.

Option is the same object in all iterations so you keep changing that one object and pushing it again and again.. move the var Option = { line into the loop — Jaromanda X
– Jaromanda X, Commented Dec 18, 2019 at 9:10

Gibor · Accepted Answer · 2019-12-18 09:12:59Z

3

Objects in JavaScript are reference based. This means that what you're pushing into the array every time isn't a new Option object- it's the reference to the same Option object. When you change the object in each loop- all the ones you pushed inside also gets "changed"- actually they don't, they just point to the changed object.

What you should do is move the var Option decleration into the loop- thereby creating (and pushing) a new option object in each iteration.

answered Dec 18, 2019 at 9:12

Gibor

1,7218 silver badges20 bronze badges

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

3 Comments

Sandeep Thomas Over a year ago

Oh man... thanks a lot for that.. I missed that point.. Cheers mate for saving the day..

Gibor Over a year ago

np man! Can you please tick the answer with the green V so it will be considered closed and answered? :)

Sandeep Thomas Over a year ago

Definitely I will.. I can make it an answer only after certain time after posting it..

Collectives™ on Stack Overflow

Pushing Object into array changes existing elements in array Javascript

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related