observableArray: group data in foreach
57 views
Skip to first unread message
danr...@gmail.com
Mar 17, 2015, 9:15:53 AM3/17/15
to knock...@googlegroups.com
The html table with the knockout.js bindings currently looks like this:
source total division
00234 4506 div1
30222 456 div2
63321 23 div2
40941 189 div1 The desired output would be something like below. The data needs to grouped by `division`.
.
.
source total
div1
00234 4506
40941 189
div2
30222 456
63321 23 Q: How can I achieve the desired output?
Here's my View:
<table class="table table-condensed" id="reportData">
<thead>
<tr>
<th>source</th>
<th>total</th>
<th>division</th>
</tr>
</thead>
<tbody data-bind="foreach: Results">
<tr>
<td data-bind="text: source"></td>
<td data-bind="text: total"></td>
<td data-bind="text: division"></td>
</tr>
</tbody>
</table>
<script type="text/javascript">
$(document).ready(function () {
ReportingViewModel.Results(null);
e.preventDefault();
var numbers = null;
if ($('#numbersdd').find("option:selected").length > 0) {
numbers = $('#numbersdd').find("option:selected");}
if (numbers != null) {
$.ajax({
url: '/Reporting/ReportData.aspx',
type: 'POST',
data: numbers,
dataType: 'json',
contentType: "application/json",
success: function (data) {
ReportingViewModel.Results(data["Data"]["Report"]);
},
error: function () {
alert('Error Running Report');
}
});
}
else { alert('No Data!'); }
});
var ReportingViewModel;
ReportingViewModel = {
Results: ko.observableArray(null),
}
ko.applyBindings(ReportingViewModel);
});
</script>
Noirabys
Mar 18, 2015, 11:47:25 AM3/18/15
to knock...@googlegroups.com, danr...@gmail.com
perhaps use computed and if binding for group headers ....
$(document).ready(function () {
function ReportingViewModel(){
var self = this;
self.results= ko.observableArray([{'source': '00234','total':'4506','division':'div1'},
{'source': '30222','total':'456','division':'div2'},
{'source': '63321','total':'23','division':'div2'},
{'source': '40941','total':'189','division':'div1'}]);
self.groupedResults = {};
self.getGroup = function(group){
return self.groupedResults[group];
};
self.groupedResultsC = ko.computed(function(){
self.groupedResults = {};
ko.utils.arrayForEach( self.results(),function(r){
if(!self.groupedResults[r.division]) self.groupedResults[r.division] = [];
self.groupedResults[r.division].push(r);
});
return self.groupedResults;
});
self.groups = ko.computed(function(){
var g = [];
for(x in self.groupedResultsC())
g.push(x);
return g;
});
}
model = new ReportingViewModel();
ko.applyBindings(model);
});
</script>
<body>
<table class="table table-condensed" id="reportData" >
<thead>
<tr>
<th>source</th>
<th>total</th>
<th>division</th>
</tr>
</thead>
<tbody data-bind="foreach: groups" >
<!-- ko foreach: $root.getGroup($data) -->
<tr data-bind="if: $index() == 0"><td colspan="3" data-bind="text: division"></td></tr>
<tr >
<td data-bind="text: source"></td>
<td data-bind="text: total"></td>
<td data-bind="text: division"></td>
</tr>
<!-- /ko -->
</tbody>
</table>
</body>
</html>
Reply all
Reply to author
Forward
0 new messages