javascript - Knockout.js not wanting to bind my list of records that has been grouped by location -

i have been trying few days no luck. i'm building asp.net mvc 5 application. i'm building reservations application restaurant. idea extract days reservations group location linq entities , send signalr client side. on client side want bind grouped query knockout.js , display it, , goes wrong. sending grouped reservations client side works fine can't seem make mapping knockout work. please help.

model on server side

var reservations = db.bistroreservations_reservations                                        .groupby(reservation => reservation.bistroreservations_location.description)                                        .orderby(reservation => reservation.key.tostring()).tolist();   var context = microsoft.aspnet.signalr.globalhost.connectionmanager.gethubcontext<reservationshub>();         context.clients.all.testinggroupedreservations(reservations); 

model on client side

var reservationsviewmodel = function () { var self = this;  var connection = $.hubconnection();     var hub = connection.createhubproxy('reservationshub')        var groupedreservations = ko.mapping.fromjs(reservations); //testing -map collection object observalbe , display underneath webpage     hub.on('testinggroupedreservations', function (reservation) {         ko.mapping.fromjs(reservation, groupedreservations);     }); 

}

ko.applybindings(new reservationsviewmodel());   

code on client view side

  <table class="table" data-bind="visible: !loading()">                 <thead class=".h1 glyphicon-bold">reservations of selected day</thead>                 <tbody data-bind="foreach: groupedreservations">                     <tr>                         <td>shift</td>                         <td>                             <table data-bind="foreach:$data">                                 <tbody>                                     <tr>                                         <td data-bind="text:bistroreservations_guestid"></td>                                     </tr>                                 </tbody>                             </table>                         </td>                     </tr>                 </tbody>             </table> 

try

this.groupedreservations = ko.mapping.fromjs(reservations); 

where declaration of "reservations" variable in line:

var groupedreservations = ko.mapping.fromjs(reservations);