How refresh function to update the data coming from php url in AngularJS

Question

I am new to ANgularJS, Here is the code, I want to refresh the table every time the data is updated in database, but this code isn't working in angularjs. How to refresh the table with $interval or any other way in AngularJS

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="customersCtrl">

<table>
  <tr ng-repeat="x in names">
    <td>{{ x.Name }}</td>
    <td>{{ x.Country }}</td>
  </tr>
</table>

</div>

<script>

var app = angular.module('myApp', []);

app.controller('customersCtrl', function($scope, $http, $timeout) {

   $http.get("http://localhost/students.php")
   .then(function (response) {$scope.names = response.data.records;});

   $timeout(callAtTimeout, 2000);
});

</script>

</body>
</html>

Saurabh Agrawal · Accepted Answer · 2017-04-12 07:05:11Z

1

Try this in you controller

  app.controller('customersCtrl', function($scope, $http, $timeout) {

    function getData(){

     $http.get("http://localhost/students.php")
     .then(function (response) {
       $scope.names = response.data.records;
       setTimeout(function() {
         getData();
       }, 2000)
    });
   };
  getData();
 });

Updated as per comment

See this example it is working fine with 5 second interval, compare your code with it

<!DOCTYPE html>
<html>
<head>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
  <script type="text/javascript">


    angular.module("app",[])
    .controller("ctrl",function($scope){

      function getData(){
        var time = new Date();
        console.log('print at '+ time);

        setTimeout(function() {
         getData();
       }, 5000)
      };
      getData();


    });

  </script>
</head>
<body ng-app="app" ng-controller="ctrl">
</body>
</html>

edited Apr 12, 2017 at 7:05

answered Apr 12, 2017 at 6:29

Saurabh Agrawal

7,7553 gold badges31 silver badges52 bronze badges

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

2 Comments

Ghazanfar Ali Khan Over a year ago

Thank You friend, this code worked perfectly fine as expected...!

Ghazanfar Ali Khan Over a year ago

the code is working fine and the data is also updating but the time limit given has no effect, i changed it from 2000 to 5000 then 9000 but it makes no difference in update time.

Giorgi Khorguani · Accepted Answer · 2017-04-12 06:27:33Z

1

This could solve the problem, but i would not recommend wasting resources.

$timeout(function(){
  $http.get("http://localhost/students.php")
  .then(function (response) {$scope.names = response.data.records;});
}, 2000);

answered Apr 12, 2017 at 6:27

Giorgi Khorguani

3272 silver badges7 bronze badges

3 Comments

Ghazanfar Ali Khan Over a year ago

i used your code, but as i updated the data in my database, it isn't refreshing the table, @giorgi

Giorgi Khorguani Over a year ago

Its not gonna update. Update is based on your timeout, which is on client side. You need web sockets for real time update.

Giorgi Khorguani Over a year ago

And i have a typo - it should use setInterval

Hadi · Accepted Answer · 2017-04-12 06:27:21Z

0

It should be like this

  $http.get("http://localhost/students.php")
      .then(function (response) {
        $scope.$evalAsync(function () {
          $scope.names = response.data.records;
      }); 
   });
 });

answered Apr 12, 2017 at 6:27

Hadi

17.3k4 gold badges41 silver badges63 bronze badges

Collectives™ on Stack Overflow

How refresh function to update the data coming from php url in AngularJS

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related