JSFiddle - React, Tailwind, and code Playground

by jlspake

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-debug.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<div class="row">
  <div class="col-2">
    Day of Week
  </div>
  <div class="col-2">
    Simulator
  </div>
</div>


<div data-bind="foreach: scheduleDays">
  <div class="row">
    <div class="col-2">
      <span data-bind="text: dayOfWeekName"></span>
    </div>
    <div class="col-2">
      <span data-bind="text: simulatorId"></span>
    </div>
  </div>
</div>

<br/>

<div data-bind="foreach: groupedScheduleDays">
  <h5>
    test 1: I should see 2 of these
  </h5>
  <!-- ko foreach: $data -->
  <div class="row">
    <div class="col-2">
      <span data-bind="text: dayOfWeekName"></span>
    </div>
    <div class="col-2">
      <span data-bind="text: simulatorId"></span>
    </div>
  </div>
  <!-- /ko -->
</div>

<br/>

<span data-bind="text: ko.toJSON(groupedScheduleDays)"></span>

JavaScript

var TimeBlock = function(id, start, end, apt) {
  this.id = ko.observable(id);
  this.startTime = ko.observable(start);
  this.endTime = ko.observable(end);
  this.appointments = ko.observableArray(apt);
}

var ScheduleDay = function(id, dayOfWeekName, date, simulatorId, timeBlocks) {
  this.id = ko.observable(id);
  this.dayOfWeekName = ko.observable(dayOfWeekName);
  this.date = ko.observable(date);
  this.simulatorId = ko.observable(simulatorId);
  this.timeBlocks = ko.observableArray(timeBlocks);
}

var ViewModel = function() {
  var self = this;

  this.timeBlocks = ko.observableArray([
    new TimeBlock(1, '0500', '0600', []),
    new TimeBlock(2, '0600', '0700', []),
    new TimeBlock(3, '0700', '0800', [])
  ]);

  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, [])
  ]);

  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);
    }

		var array = [];
    for (var x in result) {
        if (result.hasOwnProperty(x)) {
            array.push(result[x]);
        }
    }
    return array;
  });

};


ko.applyBindings(new ViewModel());