Javascript Adding data to array not working quite good

Question

Hi I am having a problem with my code hope somebody can help me with it.

I have a HTML file with two textboxes with id:name and another one with id:lname, and a submit button. When I press the button it executes this (function add) which is in a separate file.

var person = {}, people = [];

function add(){

  person.name = document.getElementById('name').value;
  person.lastname = document.getElementById('lname').value;
  people.push(person);
  console.table(people);

}

It seems to work fine the first time (It saves the values into the object and then into the array) but when I change the textboxes and press the button again, instead of saving the new values into the next position in the array it rewrites both positions with this new input duplicated

at the top of add(), start with person = {}. Or better yet, use a local variable instead of a global one. — Patrick Roberts
– Patrick Roberts, Commented Jun 13, 2018 at 2:54

Nikhil Aggarwal · Accepted Answer · 2018-06-13 02:53:35Z

1

It is happening because you are having the same reference of the object person for all positions in the array. Because of which whenever you change the value of person, it gets updated at all the places it being used. You have to create a reference for each new add operation. Try following

function add(){
  person = {}; // -------------- Add this line here
  person.name = document.getElementById('name').value;
  person.lastname = document.getElementById('lname').value;
  people.push(person);
  console.table(people);

}

answered Jun 13, 2018 at 2:53

Nikhil Aggarwal

28.5k4 gold badges46 silver badges61 bronze badges

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

2 Comments

Marcelo Over a year ago

Thank you for the quick response, I corrected my code and it worked just fine.

Nikhil Aggarwal Over a year ago

@Marcelo - Good to hear that :)

Bezlonir · Accepted Answer · 2018-06-13 03:00:43Z

0

This could be a scope issue. By putting your person object declaration in your function like Marcelo suggested, you may resolve this. You're thinking that a new object is being cloned each time, but in fact it seems that the same object is being overwritten with new values. If you ran a for loop and saved your iterator to the array each time, you'd find that in the end you'd only have the last value. So it goes.

answered Jun 13, 2018 at 3:00

Bezlonir

665 bronze badges

Comments

mooga · Accepted Answer · 2018-06-13 03:09:48Z

0

just initiate the var inside the function, so it would be able to update them every time you call the function

function add(){
  var person = {}, people = [];
  person.name = document.getElementById('name').value;
  person.lastname = document.getElementById('lname').value;
  people.push(person);
  console.table(people);

}

answered Jun 13, 2018 at 3:09

mooga

3,3274 gold badges25 silver badges40 bronze badges

1 Comment

Nikhil Aggarwal Over a year ago

This is wrong. Everytime you add, array will be reset which means at any point of time there will be maximum 1 value in the array which is not what the OP wants.

Collectives™ on Stack Overflow

Javascript Adding data to array not working quite good

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related