Grid with auto refresh html + angularJS

Question

Grid with auto refresh html + angularJS

Navigation

#1 by (0 votes)
#2 by (0 votes)

3

Well I have a grid and it needs to be ALWAYS updated because it contains information that needs to be updated dynamically.

This grid is populated with a rest flame that returns me a json. I need the grid to be updated as soon as the json of the rest call has any changes.

In my case to treat the json data and put it on the grid I'm using AngularJS and populating with an ng-repeat. Today I'm getting the updates with a setInterval of 1 second ... but this is not cool, because if I have to put some checkbox on this grid, I will not be able to check because since it updates every 1 second I would always return to the FALSE state. / p>

Would you have any solutions? I do not know how the sites that "broadcast" football games work ... but it's more or less that way. I would like to know how they do to add or remove rows from the grid without having to refresh the grid or the entire scope.

My JS:

 var app = angular.module("teste", []);



 app.controller("GridController", ['$scope', '$http', function (ng,
 $http) {

     ng.locations = [];

    setInterval(function() {
             $http.get("http://testechamarest.com:18888/json").success(function
 (dados) {
               ng.locations = $.map(dados, function (dev) {
              return dev;
            });

 }, 1000); ]);

New problem: When I modify the update time, for example: I put 3000 (3 secs) the page takes 3 seconds to open ... in the current case it is taking 1 sec to open. .. my logic in doing this must be all wrong ... but I do not know what I could improve on. :

angularjs html5 json

asked by anonymous 14.02.2014 / 17:37

2 answers

0

Take a look at WebSocket, the problem is that it works only in newer browsers and it's still a bit precarious, but I think it's more or less what you need.

With respect to your grid, I do not know how the library works that you use, but it should have a method that inserts new lines instead of refreshing the whole thing.

I use this book here link

Well complete even in the free version

Att.

Usage example

<!DOCTYPE HTML>
<html>
    <head>
        <script type="text/javascript">
            var JSON_que_estou_usando = {};

            function WebSocketTest() {
                if ("WebSocket" in window) {
                    alert("WebSocket is supported by your Browser!");
                    // Let us open a web socket
                    var ws = new WebSocket("ws://localhost:9998/echo");
                    ws.onopen = function() {
                        // Web Socket is connected, send data using send()
                        ws.send("Message to send");
                        console.log("Message is sent...");
                    };
                    ws.onmessage = function(evt) {
                        var received_msg = evt.data;
                        console.log("Message is received...");

                        //faz a verificação
                        if(JSON_que_estou_usando.stringify == received_msg.stringify){
                            //adiciona linhas na grid
                        }
                    };
                    ws.onclose = function() {
                        // websocket is closed.
                        console.log("Connection is closed...");
                    };
                }
                else
                {
                    // The browser doesn't support WebSocket
                    alert("WebSocket NOT supported by your Browser!");
                }
            }
        </script>
    </head>
    <body>
        <div id="sse">
            <a href="javascript:WebSocketTest()">Run WebSocket</a>
        </div>
    </body>
</html>

I saw this example here and just added a few lines in the "onmessage" method. This should do what you need.

Hope it helps

14.02.2014 / 17:42

Sort the Django queryset by priority Convert string to blob and save to bank

score 0 · Accepted Answer

Answering my own question!

I did this:

var app = angular.module("teste", []);

app.controller("GridController", ['$scope', '$http', function (ng,
$http) {

//Crio uma flag 'local_data'
 var local_data = null;
 ng.locations = [];

setInterval(function() {
         $http.get("http://testechamarest.com:18888/json").success(function (dados) {

        //Utilizo o stringfy para verificar se tem alguma alteração nos dados do json   para atualizar a grid, se caso tiver atualiza a grid.. se não não! :D
    if(local_data != JSON.stringify(dados)) {
            local_data = JSON.stringify(dados);

           ng.locations = $.map(dados, function (dev) {
          return dev;
        });
    }

  }, 1000); ]);

And this is how I solved the problem hehe .. I did not know about Stringify, I simply compared the two variables, data and my flag and always returned false even with changes ... transforming into Stringify I convert my entire json into a string and so I can compare if there are changes. Thank you community!