I'm trying to sort the employees object array by age and i'm getting the following output:
[object Object],[object Object],[object Object],[object Object]
However, the code works fine when i just replace the employees array with an array of numbers like: var points=[2,10,7,8]
Can someone tell me on where i'm going wrong? Thank you.
The following is my code:
<script type="text/javascript">
function sortFunc(){
var employees=[]
employees[0]={name:"George", age:32, retiredate:"March 12, 2014"}
employees[1]={name:"Edward", age:17, retiredate:"June 2, 2023"}
employees[2]={name:"Christine", age:58, retiredate:"December 20, 2036"}
employees[3]={name:"Sarah", age:62, retiredate:"April 30, 2020"}
employees.sort(function(a, b){
return a.age-b.age
// return a-b;
})
document.getElementById("disp").innerHTML=employees;
}
</script>
</head>
<body>
<div id="disp">Click the button below to sort.</div>
<button onclick="sortFunc()">Sort Now</button>
</body>
I'm trying to sort the employees object array by age and i'm getting the following output:
[object Object],[object Object],[object Object],[object Object]
However, the code works fine when i just replace the employees array with an array of numbers like: var points=[2,10,7,8]
Can someone tell me on where i'm going wrong? Thank you.
The following is my code:
<script type="text/javascript">
function sortFunc(){
var employees=[]
employees[0]={name:"George", age:32, retiredate:"March 12, 2014"}
employees[1]={name:"Edward", age:17, retiredate:"June 2, 2023"}
employees[2]={name:"Christine", age:58, retiredate:"December 20, 2036"}
employees[3]={name:"Sarah", age:62, retiredate:"April 30, 2020"}
employees.sort(function(a, b){
return a.age-b.age
// return a-b;
})
document.getElementById("disp").innerHTML=employees;
}
</script>
</head>
<body>
<div id="disp">Click the button below to sort.</div>
<button onclick="sortFunc()">Sort Now</button>
</body>
6 Answers
Reset to default 1Sorting works fine. The way you're outputting it is incorrect.
Try to use a loop and than innerHTML to add it to the page.
var out="";
for(var i=0;i<employees.length;i++){
out+="<p>"+employees[i]['age']+", "+employees[i]['name']+"</p>\n";
}
document.getElementById("disp").innerHTML=out;
Also you can define the object like that:
var employees=[
{name:"George", age:32, retiredate:"March 12, 2014"},
{name:"Edward", age:17, retiredate:"June 2, 2023"},
{name:"Christine", age:58, retiredate:"December 20, 2036"},
{name:"Sarah", age:62, retiredate:"April 30, 2020"}
]
Cheers
G.
Your problem is not with the sorting, it's because employees is an array of objects so, whether it's sorted or not, if you turn it into a string representation in order to add it to the document you are going to get
[object Object],[object Object],[object Object],[object Object]
To display your data you'll need to be a bit more structured in the way you turn it into text. For example:
var html = "";
for(var i = 0; i < employees.length; i++) {
var employee = employees[i];
html = html + employee.name + " " + employee.age + "<br/>";
}
document.getElementById("disp").innerHTML=employees;
Or you could look at using one of the many javascript templating libraries out there that make it easy to turn plex javascript structures into text / html.
Your approach is correct.
Your JavaScript however is missing all the semicolons. Plus you should use push() instead of direct assignment.
var employees = [];
employees.push( {name:"George", age:32, retiredate:"March 12, 2014"} );
employees.push( {name:"Edward", age:17, retiredate:"June 2, 2023"} );
employees.push( {name:"Christine", age:58, retiredate:"December 20, 2036"} );
employees.push( {name:"Sarah", age:62, retiredate:"April 30, 2020"} );
employees.sort(function(a, b){
return a.age - b.age;
});
To output something readable, convert the data structure into a string first:
document.getElementById("disp").innerHTML = JSON.stringify(employees);
Your sort function is indeed working. To view the output, try this:
document.getElementById("disp").innerHTML='';
for(i=0; i<employees.length; i++) {
document.getElementById("disp").innerHTML+=employees[i].age+'<br>';
}
instead of
document.getElementById("disp").innerHTML=employees;
The Problem is document.getElementById("disp").innerHTML=employees; - you stuff the employees array in the HTML without manually converting it into valid HTML, so you get JavaScript's default textual representation of it, which happens to be [object Object],[object Object],[object Object],[object Object].
Try this instead:
function prepForHTML(emp) {
var html='';
for (var i=0;i<emp.length;i++) {
for (var j in emp[i]) html+=j+"="+emp[i][j]+", ";
}
html+="<br>";
return html;
}
and
document.getElementById("disp").innerHTML=prepForHTML(employees);
You need to override toString() method, the default will show you [object Object].
Example:
function Employee(name, age, retiredate) {
this.name = name;
this.age = age;
this.retiredate = retiredate;
}
Employee.prototype.toString = function() {
return "Name:"+this.name+" Age:"+this.age+" Retiredate:"+this.retiredate;
};
var employees=[];
employees.push(new Employee("George", 32, "March 12, 2014"));
employees.push(new Employee("Edward", 17, "June 2, 2023"));
employees.push(new Employee("Christine", 58, "December 20, 2036"));
employees.push(new Employee("Sarah", 62, "April 30, 2020"));
employees.sort(function(a, b){
return a.age-b.age;
});
document.getElementById("disp").innerHTML=employees;