CODEWITHSUNDEEP
javascriptangularjs
Monzingo
Monzingo

Reputation: 411

Angular Table Refresh

I have an api that gets called on page load. The data from the api is loaded into a table via angular ng-repeat. I also have a javascript function that gets called every 10 seconds that calls the same api for the same dataset. I Would like to know how i can apply the new dataset to the table and replace the old if the dataset changes and how to visually show this change with animation. The code is below.

Table code

<body ng-app="myApp" ng-controller="ScansController">
<div class="bs-example" id="scan-table">
    <table id="scansTable" class="table table-striped">
        <thead>
            <tr>
                <th>ScanId</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Time Stamp</th>
            </tr>
            <tr ng-repeat="scan in Scans">
                <td>
                    {{scan.scanId}}
                </td>
                <td>
                    {{scan.firstName}}
                </td>
                <td>
                    {{scan.lastName}}
                </td>
                <td>
                    {{scan.timeStamp}}
                </td>
            </tr>
        </thead>
    </table>
</div>

Javascipt interval code

<script>
  window.setInterval(function () {
    $.ajax({
        url: 'api/scans/',
        type: 'Get',
        dataType: 'json',
        success: function (data) {                
        //Something here
        },
        error: function () {
          alert("something failed");
        }
     });

    }, 10000);
</script>

Angular Code

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

myApp.service('dataService', function ($http) {

this.getData = function () {

    return $http({
        method: 'GET',
        url: '/api/scans/'
    });
}
});

myApp.controller('ScansController', function ($scope, dataService) {
$scope.Scans = [];

    dataService.getData().then(function (result) {
        $scope.Scans = result.data;
        console.log(result.data);
    }); 
});

Upvotes: 3

Views: 2945

Answers (2)

Monzingo
Monzingo

Reputation: 411

As far as the table refresh that didnt get addressed, this is how i was able to make it work. I downloaded and applied the animate.css. I then gave the table a starting class to animate it on class load. I then have a function that fetches the array of data on page load and then another that fetches every .5 seconds and compares. If anything has changed, then the class is reapplied and it shows animation.

Angular Ng-Repeat Table

<link href="~/Content/animate.min.css" rel="stylesheet" />
<h1>
Scans
</h1>
<body ng-app="myApp" ng-controller="ScansController" >   
    <table id="scansTable" class="table table-striped">
        <thead>
            <tr>
                <th>ScanId</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Time Stamp</th>
            </tr>
            <tr ng-repeat="scan in Scans" ng-class-odd="'odd'" ng-class-even="'even'" class="animated bounceIn">
                <td>
                    {{scan.scanId}}
                </td>
                <td>
                    {{scan.firstName}}
                </td>
                <td>
                    {{scan.lastName}}
                </td>
                <td>
                    {{scan.timeStamp}}
                </td>
            </tr>
        </thead>
    </table>

Angular Controller 

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

myApp.service('dataService', function ($http) {

this.getData = function () {

    return $http({
        method: 'GET',
        url: '/api/scans/'
    });
}
});

myApp.controller('ScansController', function ($scope, dataService, $timeout) {

$scope.Scans = [];
$scope.NewScans = [];

function fetchData() {
    dataService.getData().then(function (result) {

        $scope.Scans = result.data;
        $("#scansTable").removeClass('animated bounceIn');           
    });
}

function fetchNewData() {
    dataService.getData().then(function (result) {

        $scope.NewScans = result.data;

        if ($scope.Scans.length != $scope.NewScans.length)
        {               
            $("#scansTable").addClass('animated bounceIn');
            $scope.Scans = $scope.NewScans              
        }

        $timeout(function () { fetchNewData(); }, 500);
    });
}

fetchData();
fetchNewData();

});

Upvotes: 0

Dan Kanze
Dan Kanze

Reputation: 18595

You need to stay inside the current scope.

Setting an interval on a $http call is poison. Use a $timeout inside the success callback to recursively call the next interval.

myApp.controller('ScansController', function ($scope, $timeout, dataService) {

  $scope.Scans = [];

  function fetchData(){
    dataService.getData().then(function (result) {
      $scope.Scans = result.data;
      $timeout(function(){ fetchData(); },10000);
    });   
  }

  fetchData();
});

Upvotes: 2

Related Questions