Foreach Binding on a Knockout Computed Observable

I have an observableArray, scheduleDays, that looks like below. It represents 1 week of appointments for a selected simulator game.

If the user selects 2 simulator schedules to view, the returned view model looks like this:

this.scheduleDays = ko.observableArray([
  new ScheduleDay(1, 'Sunday', '02/09/2020', 1111, []),
  new ScheduleDay(4, 'Sunday', '02/09/2020', 2222, []),
  new ScheduleDay(2, 'Monday', '02/10/2020', 1111, []),
  new ScheduleDay(5, 'Monday', '02/10/2020', 2222, []),
  new ScheduleDay(3, 'Tuesday', '02/10/2020', 1111, []),
  new ScheduleDay(6, 'Tuesday', '02/10/2020', 2222, [])
]);

That causes the UI to display the results like this:

But what I want is for the data to be sorted by simulator, then by date like this:

The obvious solution is sort it but for learning purposes, I wanted to try solving it by grouping the view models by simulator. So I added this:

this.groupedScheduleDays = ko.computed(function() {
var result = {};
var original = self.scheduleDays();
console.log(original);

for (var i = 0; i < original.length; i++) {
  var item = original[i];
  result[item.simulatorId] = result[item.simulatorId] || [];
  result[item.simulatorId].push(item);
}

return result;
});

And that produced this:

That's what I was expecting. Here is what I came up with so far https://jsfiddle.net/krob636/o48unhsg/58/. My question is how can I bind groupedScheduleDays in a foreach?