O
O
okozlovskyi2014-06-11 03:44:46
JavaScript
okozlovskyi, 2014-06-11 03:44:46

How to update data in a table after changing it? AngularJS

Problem updating data in table.
I receive data from the server, and after some time a notification comes from the websocket that some record has been changed, but the record in the table itself does not change. How can the table be updated? Updated only after a page refresh.
I get the data with a GET request.
My sources:
I get it like this:

$http({
            method: 'GET',
            url: 'rest/api/get'
        }).success(function(data, status, header) {
            $scope.mydata = data;

        }).error(function(data, status, header) {
            console.log(status);
        });

I output like this:
<tr item="parameter" ng-repeat="item in mydata"  ng-show="item.status=='4' || item.status=='8' || item.status=='C'">
                          <td>{{item.id}}</td>
                          <td>{{item.type}}</td>
                          <td>{{item.status}}</td>
                          <td>{{item.price}}</td>                         
                      </tr>

My websocket service:
var services = angular.module('services', []);
services.factory('EventService', ['$cookies',
    function($cookies) {
        var service = {};
        service.connect = function() {
            if (service.ws) {
                return;
            }
            var ws = new WebSocket("ws://" + window.location.host + "/events/");

            ws.onopen = function() {
                ws.send(JSON.stringify({
                    type: "auth",
                    token: $cookies.token
                }));
                console.log("Succeeded to open a conection");
            };
            ws.onerror = function() {
                console.log("Failed to open a connection");
            };
            ws.onmessage = function(message) {
                var obj = JSON.parse(message.data);
                if (obj.result) return;

                if (obj.id) {
                    setTimeout(function() {
                        service.callback(obj);
                    }, 1000)
                }
            };
            service.ws = ws;
        };
        service.subscribe = function(callback) {
            service.callback = callback;
        };
        return service;
    }
]);

And using the service in the controller:
EventService.subscribe(function(msg) {
            console.log(msg);
            var item = $.grep($scope.mydata, function(item) {
                return item.id == msg.id
            })
            if (item.length > 0) {
                item[0].status = msg.status
            } else {
                $scope.mydata.push(msg);
            }

            $scope.$apply();

        });
        $scope.getOrders();
        EventService.connect();

Answer the question

In order to leave comments, you need to log in

1 answer(s)
M
maxaon, 2014-06-11
@okozlovskyi

You don't tell Angular that the data has arrived, i.e. you don't run a digest cycle
where

if (obj.id) {
  setTimeout(function() {
    service.callback(obj);
  , 1000)
}

necessary
$rootScope.apply(function(){
service.callback(obj);
});

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question