Javascript objects in array of objects,are different using console.log
Question
My Code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
</head>
<body>
<script>
var students = [];
var student = {};
var scores = [];
var final = [];
function setStudent(name , score) {
student = {"Name": name, "Score": score};
//student.Name = name;
//student.Score = score;
document.write(student.Name + " scored " + student.Score + ".<br>");
final.push(student);
return student;
}
for (var i=0; i<4; i++) {
students.push(prompt("Please Enter student name"));
}
for (var i=0; i<4; i++) {
scores.push(prompt("Please Enter "+ students[i] +"'s score" ))
}
for (var i=0; i<4; i++) {
setStudent(students[i],scores[i]);
}
console.log(final);
</script>
</body>
</html>
This is the first version which works, the console output look like this: Image can be found at http://i.imgur.com/HnEHX5J.png
While the second version is:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
</head>
<body>
<script>
var students = [];
var student = {};
var scores = [];
var final = [];
function setStudent(name , score) {
//student = {"Name": name, "Score": score};
student.Name = name;
student.Score = score;
document.write(student.Name + " scored " + student.Score + ".<br>");
final.push(student);
return student;
}
for (var i=0; i<4; i++) {
students.push(prompt("Please Enter student name"));
}
for (var i=0; i<4; i++) {
scores.push(prompt("Please Enter "+ students[i] +"'s score" ))
}
for (var i=0; i<4; i++) {
setStudent(students[i],scores[i]);
}
console.log(final);
</script>
</body>
</html>
The output of this version is: You can find image at https://i.stack.imgur.com/0mQFz.png
Just in case you have no idea what is changed look at the function where the object is assigned My question is that why the output differ.
1 answers
solution1
0 ACCPTED 2017-05-30 03:27:07
You're not declaring the variable student inside your setStudent function. Therefore, the variable student is defined on the global object window . When you run this method, you're using the same pointer every time and thus changing values of the same pointer and re-adding the same object to the array.
To fix this error, simply declare a student to an empty object literal {}
My question is that why the output differ
The reason why the outputs differ is because document.write will convert the object at the current point in time to a string . In console.log , grabbing subproperties of objects is done at the time you expand the arrow in console.log . If you cloned the objects or used JSON.stringify after each assignment and then console.log ged them, then the output of console.log will be as expected.
var students = []; var student = {}; var scores = []; var final = []; function setStudent(name, score) { //student = {"Name": name, "Score": score}; // ERROR HERE // you're not declaring the variable `student` therefore, the variable `student` is defined on the global object `window`. When you run this method, you're using the same pointer every time and thus changing the pointer and readding it to the array. var student = {}; // this is the fix student.Name = name; student.Score = score; document.write(student.Name + " scored " + student.Score + ".<br>"); final.push(student); return student; } for (var i = 0; i < 4; i++) { students.push(prompt("Please Enter student name")); } for (var i = 0; i < 4; i++) { scores.push(prompt("Please Enter " + students[i] + "'s score")) } for (var i = 0; i < 4; i++) { setStudent(students[i], scores[i]); } console.log(final);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.