so what i’m attempting to do is, get the data entered in forms and store them in their respective variables within an object. After that I want to append said object to an empty array and repeat the process. using the function showMe() ., i want to print value at specified index. However, no matter the index i set, it only gives me the value of last item added to the array. Where did i go wrong??
var USERS = [];
var user= {
firstName: "None",
lastName : "None",
age : 0,
bodyType : "None",
height : 0,
bdayDay : 0,
bdayMonth : "None",
bdayYear : 0,
gender: "None"
};
function addnew(){
user.firstName = document.getElementById("fname").value;
user.lastName = document.getElementById("lname").value;
user.age = document.getElementById("age").value;
if (document.getElementById("genMale").checked)
user.bodyType = document.getElementById("btMale").value;
else
user.bodyType = document.getElementById("btFemale").value;;
user.height = document.getElementById("Height").value;
if (document.getElementById("genMale").checked)
user.gender = document.getElementById("genMale").value;
else
user.gender = document.getElementById("genFemale").value;
USERS.push(user);
}
function showMe(){
console.log(USERS[1].firstName);
}
When you create an object, push it to an array, and then further edit the object, you edit the object in the array as well because the array just holds a reference to the object.
For example:
var obj = {
name:'mark'
}
var arr = [obj]
console.log(arr)
// [ { name: 'mark' } ]
obj.name= "tom"
console.log(arr)
//[ { name: 'tom' } ]
Basically, I have faced this issue on industry specific erp and related things.
You are overwriting your object in the array every time. You can instead do something like:
function addnew(){
var user = {}
user.firstName = document.getElementById("fname").value;
// etc.
}
To create a new object every time the function runs.
Alternatively, you could use an approach where you define a constructor function and call new when you want to create an object:
function User(){
this.firstName = "None"
this.lastName = "None"
this.age = 0
this.bodyType = "None",
this.height = 0
this.bdayDay = 0
this.bdayMonth = "None"
this.bdayYear = 0
this.gender = "None"
}
function addnew(){
var user = new User()
user.firstName = document.getElementById("fname").value;
// etc.
}
This has the advantage of later being able to organize behaviour by defining methods on the User prototype.
It can be done also with -
var USERS = [];
var defaultUser= {
firstName: "None",
lastName : "None",
age : 0,
bodyType : "None",
height : 0,
bdayDay : 0,
bdayMonth : "None",
bdayYear : 0,
gender: "None"
};
function addnew(){
const newUser = {
firstName: document.getElementById("fname").value,
lastName: document.getElementById("lname").value,
age: document.getElementById("age").value,
height: document.getElementById("Height").value,
gender: document.getElementById("genMale").checked
? document.getElementById("genMale").value
: document.getElementById("genFemale").value,
bodyType: document.getElementById("genMale").checked
? document.getElementById("btMale").value
: document.getElementById("btFemale").value
};
USERS.push(
Object.assign(defaultUser, newUser); //creates a new object with defaults
);
}
function showMe(){
console.log(USERS[1].firstName);
Hope this article helps everyone properly.
