CODEWITHSUNDEEP
javascriptarraysangularjsfirebase
Dler Ari
Dler Ari

Reputation: 21

Angular JS and Firebase duplicate data error

The problem I am encountering is that when insert text in plate number, car brand and save it, the table shows duplicates even the firebase database is showing normal data.

Procedure to find the problem (Remember you have to type at least 3 times to see the dublicate effect): Input plate number and Car Brand, just type random text. Then click on the save button.

Link to my plunker code, follow the procedure and you will see the problem

My script.js code, I believe the problem is here. 

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

angular.module('myApp').controller('customerCtrl', function($scope) {

  $scope.CustomerPlateNumber = "";
  $scope.CustomerCarBrand = "";
  $scope.customers = [];

  $scope.myData = new Firebase("https://sizzling-torch-2102.firebaseio.com/CustomerInformation");

  // PS, husk at CustomerPlatenumber: må være lik navnet på ng-model. 
  $scope.saveCustomerData = function() {
    $scope.myData.push({CustomerPlateNumber: $scope.CustomerPlateNumber, CustomerCarBrand: $scope.CustomerCarBrand});

  // Empty input after storing data
  $scope.CustomerPlateNumber = "";
  $scope.CustomerCarBrand = "";

  };

  // Two parameters, needs to know what its going to be fired upon, and a function that tells what to do when it is fired. 
  $scope.myData.on('value', function(snapshot) {
    var values = snapshot.val();
    for(var myVal in values)
    {
      var item = values[myVal];

      $scope.customers.push(item);
    }
    //not recommended, look at "refresh bindings angular"
    $scope.$apply(); 
  });
});

Upvotes: 0

Views: 192

Answers (1)

Nix
Nix

Reputation: 58522

From what I can tell you are inserting duplicates, and any time the set changes firebase is returning the entire set not just the added items. So you have two options keep as is and change to:

$scope.myData.on('value', function(snapshot) {
  $scope.customers = snapshot.val();
  $scope.$apply(); //or you can use timeout here to be safer.
});

I generally dont use $apply so you can also do:

$scope.myData.on('value', function(snapshot) {
  $timeout(function(){
       $scope.customers = snapshot.val();
  }); 
});

Or you can use the child_added event that you could also use that might be better.

$scope.myData.on('child_added', function(item) {
  console.log('child added', item);
  $timeout(function(){
     $scope.customers.push(item.val());
  }); 
 });

Upvotes: 1

Related Questions