Confused about viewmodel creation where I have to add a computed field - ajax

Question

My json call returns an object array:
[
{
Table: 1,
FirstName: "Bert",
LastName: "Smith",
Place: 1
},
{
Table: 1,
FirstName: "Suzanne",
LastName: "Smith",
Place: 2
},
{
Table: 1,
FirstName: "Matthew",
LastName: "Stewart",
Place: 3
},
{
Table: 1,
FirstName: "Brian",
LastName: "Robinson",
Place: 4
},
{
Table: 1,
FirstName: "Jennifer",
LastName: "Robinson",
Place: 5
},
{
Table: 1,
FirstName: "Andrew",
LastName: "Caygill",
Place: 6
},
{
Table: 1,
FirstName: "Susan",
LastName: "Caygill",
Place: 7
},
{
Table: 1,
FirstName: "John",
LastName: "Spreadbury",
Place: 8
},
{
Table: 1,
FirstName: "Anne-Marie",
LastName: "Nevin",
Place: 9
}]
I have a template in my HTML:
<script type="text/html" id="dataLine">
<div class="itemLine">
<div class="Name">
<span class="fixtureBoxLine" data-bind="text: fullName"></span>
</div>
<div class="TableNo">
<span class="fixtureBoxLine" data-bind="text: Table"></span>
</div>
</div>
</script>
and the binding is:
<div data-bind="template: { name: 'dataLine', foreach: pageCol1 }"></div>
My viewmodel is:
var viewModel = {
fields: ko.observableArray([]),
pageSize: ko.observable(1),
pageIndex: ko.observable(0)
};
viewModel.pageCol1 = ko.computed(function() {
var size = Number(this.pageSize());
var start = this.pageIndex() * size * 2; //2 cols per page
var end = start + size;
return this.fields.slice(start, end);
}, viewModel);
All works fine except I can't get a "fullname" property. If I try adding it to the viewmodel in the same way as I did with "pageCol1" above, then as my json success property just does:
viewModel.fields(xlData);
it doesn't work as there is no "fullName" property on the data returned.
I feel I've tried every possible combination today and have now given myself a headache! Please would someone point me in the right direction?
Thanks!

Answer 1

Try extending your pageCol1 by adding new field (concatenated from another two) to your response array like:
viewModel.pageCol1 = ko.computed(function() {
var size = Number(this.pageSize());
var start = this.pageIndex() * size * 2; //2 cols per page
var end = start + size;
for( var i = 0, len = this.fields.length; i < len; i++ ) {
this.fields[ i ].fullName = this.fields[ i ].FirstName + ' ' + this.fields[ i ].LastName;
}
return this.fields.slice(start, end);
}, viewModel);
so in final result before you're iterating over your array it will be like:
[
{
Table: 1,
FirstName: "Bert",
LastName: "Smith",
fullName: "Bert Smith",
Place: 1
},
{
Table: 1,
FirstName: "Suzanne",
LastName: "Smith",
fullName: "Suzanne Smith",
Place: 2
},
{
Table: 1,
FirstName: "Matthew",
LastName: "Stewart",
fullName: "Matthew Stewart",
Place: 3
},
...