JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>
<table class="table table-hover">
<thead>
<tr>
<th>Tag ID</th>
<th>Tag name</th>
<th>Task ID</th>
<th>Task name</th>
</tr>
</thead>
<tbody>
<!-- ko foreach: filteredtagMappings2() -->
<tr>
<td class="ui-state-default" data-bind="text: TagID"></td>
<td class="ui-state-default" data-bind="text: TagName"></td>
<td></td>
</tr>
<!-- /ko -->
</tbody>
</table>
JavaScript
var viewModel = function(data) {
var self = this;
self.tagTaskMappings = ko.observableArray([{
TagID: 2,
TagName: "A",
TaskID: 1,
TaskName: "ManualItems"
}, {
TagID: 2,
TagName: "A",
TaskID: 2,
TaskName: "Trades"
}, {
TagID: 3,
TagName: "B",
TaskID: 1,
TaskName: "ManualItems"
}, {
TagID: 3,
TagName: "B",
TaskID: 2,
TaskName: "Trades"
}, {
TagID: 3,
TagName: "B",
TaskID: 3,
TaskName: "Cash"
}, {
TagID: 3,
TagName: "B",
TaskID: 4,
TaskName: "ReportA"
}]);
self.filteredtagMappings2 = function() {
var returnObject = ko.observableArray('');
var uniques = _.map(_.groupBy(ko.toJS(self.tagTaskMappings), function(item) {
return item.TagID;
}), function(grouped) {
return grouped[0];
});
ko.mapping.fromJS(uniques, {}, returnObject);
return returnObject;
};
};
ko.applyBindings(new viewModel());