1

I have a controller that reads data via rest and displays it in a table - this part is working fine. Additionally i added a WebSocket and want to update the table if Websocket receives data. Here is the Code:

app.controller('allBookingsCtrl', function($scope, $http, currentUser){
    $scope.bookingsList = [];
    var ws = new WebSocket(wsRootUrl + '/allbookings');
    ws.onmessage = function(message){
        $scope.$apply(function(){
            $scope.bookingsList = message.data;
            alert(message.data);//displays correct data!
        });
    };
    $http.get(rootUrl + '/timetracker/booking/all').success(function(response) {
        $scope.bookingsList = response;
    });
});

The problem is the table is not updated on call of apply. I debugged and could trigger onmessage by changing data from another browser. the content of data is also correct, no error is thrown.

So how to update the table/scope with data received by websocket?

here is html:

<table ng-controller="allBookingsCtrl" class="table">
        <thead>
            <tr>
                <th>#</th>
                <th>user</th>
                <th>project</th>
                <th>start</th>
                <th>end</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="booking in bookingsList">
                <td>{{$index + 1}}</td>
                <td>{{booking.usersProjects.user.name}}</td>
                <td>{{booking.usersProjects.project.name}}</td>
                <td>{{booking.start | date:'yyyy-MM-dd HH:mm:ss' }}</td>
                <td>{{booking.end | date:'yyyy-MM-dd HH:mm:ss' }}</td>
            </tr>
        </tbody>
    </table>

Small Edit: if i add alert(data); at the end of on message i see the alert with correct data! So only the apply with the list isn't working correctly.

added plunkr I tried to reproduce this in plunkr and with no websocket - tried to get the update on ng-click. But this isn't working neither - here the click is not doing anything.

dermoritz
  • 12,519
  • 25
  • 97
  • 185
  • could you double check..I doubt about the data..it should work. – Pankaj Parkar Jun 08 '15 at 16:02
  • as i said i debugged into `$scope.bookingsList = data;` and "watched" data. the data is the correct list. do i need some ng-model? – dermoritz Jun 08 '15 at 18:34
  • Just for debugging: Can you try "$rootScope.$apply" in your code instead of "$scope.$apply"? (You have to inject $rootScope first) – timtos Jun 09 '15 at 10:19
  • i tried is - no change. i see correct alert but table is not changing – dermoritz Jun 09 '15 at 10:51
  • Then I would try the following things for debugging: Try to make a custom watch function on bookingsList and see if it gets fired. And check the behaviour when using angular.extend: https://docs.angularjs.org/api/ng/function/angular.extend. And try to make bookingsList an object and see if that makes a different. And perhaps try to change the scope variable in different ways and see which one does the job (with a promise for example). All this first for debugging and analysis. Really strange. Oh, can you provide a plunkr? :) Very strange all this... – timtos Jun 09 '15 at 11:37
  • thanks but i am new to (angular) js. could you please for my plunkr - see last edit? I tried to use ng-click instead of ws.onmessage but this isn't working. thanks – dermoritz Jun 09 '15 at 14:27
  • Hey, if you use ng-click you don't need to call $apply. Angular knows that you are changing something. Your plunker is working if you remove this. I've updated it a little: http://plnkr.co/edit/4sAV1HbxJKwbAQERxMp8 – timtos Jun 09 '15 at 15:18
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/80087/discussion-between-timtos-and-dermoritz). – timtos Jun 09 '15 at 15:29

1 Answers1

0

Can you change this line

$scope.bookingsList = data;

to 

$scope.bookingsList = message.data;
murnax
  • 1,222
  • 1
  • 10
  • 13