Knockout.js not wanting to bind my list of records

Question

I have been trying for a few days now with no luck. I'm building a ASP.NET MVC 5 application. I'm building a reservations application for a restaurant. The idea is to extract a days reservations group it by location with linq to entities and then send it with signalR to the client side. On the client side I want to bind this grouped query with knockout.js and then display it, and that is where everything goes wrong. Sending the grouped reservations to the client side works fine but I can't seem to make the mapping with 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 a collection object to a observalbe and display it underneath the webpage
    hub.on('TestingGroupedReservations', function (reservation) {
        ko.mapping.fromJS(reservation, GroupedReservations);
    });

}

ko.applyBindings(new ReservationsViewModel());  

Code on the 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>

Answer 1

Try

this.GroupedReservations = ko.mapping.fromJS(reservations);

Where is the declaration of "reservations" variable in this line:

var GroupedReservations = ko.mapping.fromJS(reservations);

Answer 2

From first blush you are never setting the GroupedReservations property and you are also not returning self. If you do not return self all of your properties are considered private.

In addition anything you want to be publicly accessible needs to be a property on self.

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

var connection = $.hubConnection();
    var hub = connection.createHubProxy('reservationsHub') 

         **self.GroupedReservations  = ko.mapping.fromJS(reservations);**
//Testing -map a collection object to a observalbe and display it underneath the webpage
    hub.on('TestingGroupedReservations', function (reservation) {
        ko.mapping.fromJS(reservation, GroupedReservations);
    });
**return self;**
    }