Reloading using Angular

Question

Hello friends from SO!

I'm new into angular, and I'm trying to keep a table always updated with the information comming from a PHP webservice.

I'm demanding the information the first time using the following:

HTML

<div class="block" ng-controller="demandar_informacion" ng-init="visualizacion_masiva()">
                    <h1 class="block_header">Welcome admin</h1>
                    <p class="block_info"></p>
                    <table>
                        <thead>
                            <tr>
                                <th ng-repeat="header in headers ">{{header}}</th>
                            </tr>
                        </thead>
                        <tr ng-repeat="disponible in disponibles">
                            <td ng-repeat="(variable, valor) in disponible">{{valor}}</td>
                        </tr>
                    </table>
                </div>

Then I'm using the following code to get the information:

Js Angular:

function demandar_informacion($scope, $http) {

        //pedido de visualización masiva
        $scope.visualizacion_masiva = function() {

            var address = "http://127.0.0.1/usa/_code/index_records.php"
            + "?ac=view_all"

            var pedido = $http({
                method: 'GET',
                url: address
            })

            .success(function(data, status) {
                $scope.errors = data.error;
                $scope.headers = data.headers;
                $scope.disponibles = data.disponibles;
                $scope.eliminados = data.eliminados;
                $scope.info = data.info;
            });

        };

}

Main Q:

Is there any way I could re-send the HTTP packet and update the information every, let's say, 3 or 5 seconds? as It's rapidly changing.

Auxiliary:

At the same time, this fragment of code, seems to be altering the order of the values I have on the array, or it might be previously altered somewhere in the Angular code. I've checked the PHP and the Json string seems to be in right conditions, but when it comes to printing the values, it completely looses it's native order (shows the elements in an improper / unknown order)... anyone has a clue?

<tr ng-repeat="disponible in disponibles">
                            <td ng-repeat="(variable, valor) in disponible">{{valor}}</td>
                        </tr>

Thanks in advance! Chris C. Russo

Michael J. Calkins · Accepted Answer · 2014-03-13 00:54:32Z

1

Update

$scope.update = function() {
  $timeout(function() {
    $http.get('lol').success(function() {
      $scope.update();
    });
  }, 5000);
};

Old

Simplest way to do this:

$interval(function() {
  demandar_informacion();
}, 5000);

buuuuutttt as MichaL pointed out in the comments what will happen is that 5 seconds will get eaten up as it becomes 5, 4, 3, 2, 1, DDOSing yourself due to the time it takes to complete the request.

Other ways:

Use firebase to wait and call the load function.
Long poll your php script.

edited Mar 13, 2014 at 0:54

answered Mar 12, 2014 at 23:50

Michael J. Calkins

32.7k15 gold badges64 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Michał Dudak Over a year ago

Using $interval may be dangerous - it's better to use chained $timeout calls (if demandar_informacion execution takes more than 5s, then we're in trouble). See weblogs.asp.net/bleroy/archive/2009/05/14/…

Michael J. Calkins Over a year ago

@MichałDudak That's a good point a recursive function would be better.

Chris Russo Over a year ago

Señores, muchas gracias. 1kg of Thanks!

Michał Dudak · Accepted Answer · 2014-03-12 23:48:04Z

0

You can use the $timeout service to call the server every few seconds. Or use websockets to push the changes from the server to your Angular app (with Ratchet, perhaps (http://socketo.me/))

answered Mar 12, 2014 at 23:48

Michał Dudak

5,0682 gold badges23 silver badges29 bronze badges

Collectives™ on Stack Overflow

Reloading using Angular

2 Answers 2

Update

Old

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Update

Old

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related