Grid with auto refresh html + Angularjs

Question

Grid with auto refresh html + Angularjs

Asked 10 years, 4 months ago

Viewed 1,588 times

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 updated as soon as the json of the Rest call has some change.

In my case to handle the data of json and place on the grid I am using Angularjs and populating with an ng-repeat. Today I’m taking the updates with a 1 second setInterval... but this is not cool, because if I have to put some checkbox on this grid, I will not be able to check because as updates 1 in 1 second would always return to the state of FALSE.

Would you have any solution? I don’t know how the websites that "broadcast" football games work... but it’s kind of like this. I wanted to know how they do to add or remove grid lines without having to refresh the grid or the whole 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 change the time of updates, for example: put 3000(3 sec) the page takes 3 seconds to open... in the current house is taking 1 sec to open... my logic when doing this must be all wrong... but I do not know what I could improve. :(

1

Take a peek at the Meteor - I think you’ll like it.

– J. Bruni

2014/02/14 at 18:23
Poxa company does not open https... but I think I would have to change all my structure... would not be cool this time of the project.

– peterq

2014/02/17 at 14:26

2 answers

0

Answering my own question!

I did it this way:

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 that’s how I solved the problem hehe.. did not know about Stringify, I simply compared the two variables, data and my flag and always returned false even with changes... turning into Stringify I convert my entire json into a string and so can compare if there are changes. Thank you community!

I think you should read the data, compare row by row and update the columns that have not been touched by the user (in case of editable fields and checkboxes

– SparK

2014/02/17 at 18:52
Yeah, that would be a good thing... but don’t you think for a one-in-a-second check that would be too heavy? Thinking that the grid may have 100 lines in the future.

– peterq

2014/02/17 at 21:59
when you need to use a timer, use the $timeout and $interval services, which suit the $Digest angular cycle. it is strange that the angular can update the screen like this.

– André Werlang

2015/01/31 at 20:27
and if the service supports data return from a condition, for example, "only if there are changes since such date", the implementation would be more elegant.

– André Werlang

2015/01/31 at 20:29

Browser other questions tagged html5 json angularjs

You are not signed in. Login or sign up in order to post.

by Elizeu Madeira • 1 point · Answer 1 · 2014-02-14T16:42:45+00:00

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

Regarding your grid, I don’t know how the library that you use works, but there must be a method that inserts new lines instead of refreshing the whole thing

I use this Bible here http://www.dhtmlx.com/docs/products/dhtmlxGrid/samples/15_navigation/01_pro_keymap_access.html

Very complete even in the free version

Att.

Example of use

<!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

I hope it helps