JSFiddle - React, Tailwind, and code Playground
HTML
<div id="students">...</div>
JavaScript
/* add students */
var students = new Array();
students.push({ name: "Student 1", room_id: 5, age: 1 });
students.push({ name: "Student 2", room_id: 1, age: 22 });
students.push({ name: "Student 3", room_id: 3, age: 3 });
students.push({ name: "Student 4", room_id: 1, age: 25 });
students.push({ name: "Student 5", room_id: 5, age: 23 });
students.push({ name: "Student 6", room_id: 3, age: 2 });
/* sort by room_id */
students.sort(function(a, b) {
if(a.room_id < b.room_id){
return -1;
}else if(a.room_id > b.room_id){
return 1;
}else{
if(a.age < b.age){
return -1
}else if(a.age > b.age){
return 1;
}
}
});
/* FIXME: sort by age without changing the room order */
/* ... code ... */
/* build HTML output */
var html = '<table>';
html += '<tr><th>Name</th><th>Room</th><th>Age</th></tr>';
for (var i = 0; i < students.length; i++) {
html += '<tr><td>'+ students[i].name +'</td><td>'+ students[i].room_id +'</td><td>'+ students[i].age +'</td></tr>';
}
html += '</table>';
$("#students").html(html);