CODEWITHSUNDEEP
javascriptajaxangularjswatch
Tariq
Tariq

Reputation: 155

How to know which data has been changed in an array?

I'm trying to get which data has been changed in array. my use case is First time all data fetch from ajax and show within row and fetch new data using $http every 5 second. I need to know that if the new data is same as old one. If yes then which value has changed so I've to update that background to some color..

What I've already tried 

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

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

        $scope.listings;

        setInterval(function(){ 
            $http.get('_includes/ajax.php?req=get').
                success(function(data, status, headers, config) {
                  $scope.listings = data;
                  console.log(data);
                }).
                error(function(data, status, headers, config) {
                  // log error
            }); 

        }, 5000);

    });

    app.controller('RentalDateController', function($scope, $log){

         console.log($scope.listings);
         $scope.$watch('listings.Third_Column', function (Third_Column, oldvalue) {
            //$log.info(Third_Column, $scope.listings.First_Column);
             console.log('being watched oldValue:', oldvalue, 'newValue:', Third_Column);
          }, true);
    });

My html is 

<body ng-app="app">
    <div ng-controller="listingController">


    <table>
        <tr>
            <th>Testing</th>
            <th>Pripse</th>
        </tr>

        <tr ng-repeat="row in listings" ng-controller="RentalDateController">
            <input type="text" ng-model="row.Third_Column">
            <input type="text" ng-model="row.First_Column">
            <th>{{row.Third_Column}}</th>
            <th>{{row.First_Column}}</th>
        </tr>

    </table>
    </div>
</body>

I think I need to use $watch but it's not working.

Upvotes: 0

Views: 88

Answers (2)

gsalisi
gsalisi

Reputation: 116

You have the angular two-way data binding so it should automatically update your ng-repeat when the model changes.

I suggest the following 1) Remove RentalDate controller first. 2) Use $timeout, and on success of http use this

$scope.$apply(function(){
  $scope.listing = data;
});

If that doesn't still automatically update, put the array in an object.

$scope.data = {}
$scope.data.listings = putArrayHere();

This will work because of this. Read up. :D

https://github.com/angular/angular.js/wiki/Understanding-Scopes#javascript-prototypal-inheritance

Upvotes: 1

Anubhav
Anubhav

Reputation: 7208

Try doing this: 

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

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

        $scope.listings;
        var previousListing = [];
        var newData;

        setInterval(function(){ 
            $http.get('_includes/ajax.php?req=get').
                success(function(data, status, headers, config) {
                  $scope.listings = data;
                  console.log(data);
                }).
                error(function(data, status, headers, config) {
                  // log error
            });

            if( previousListing.length == $scope.listings.length )
            {
                console.log('No new data available.');
            }
            else
            {
                // length of the arrays are different, hence new data must be available
                console.log('New data available!');
                newData = $scope.listings.splice( 0, ($scope.listings.length - previousListing.length) ); // returns new data in the form of an array
                console.log(newData);
                previousListing = $scope.listings; // reset previous data variable

            }

        }, 5000);

    });

Upvotes: 0

Related Questions