Angular JS search filter is not filtering the data by using Firebase

Question

The problem I am encountering is that the search filter does not filter the table. Any advice or help of what the issue can be? The application I am making is simple, the user shall input two text strings and save it so data can be stored in firebase database. Then filter the able by searching. However, the searching does not work.

Click here to access plunker

Index.html

 <table class="table table-bordered">
  <thead>
    <th>Plate Number</th>
    <th>Car Brand</th>
  </thead>
  <tbody>
    <tr ng-repeat="customer in customers | filter:search">
      <td>{{customer.CustomerPlateNumber}}</td>
      <td>{{customer.CustomerCarBrand}}</td>
    </tr>
  </tbody>
</table>

script.js (Using firebase)

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) {
    $scope.customers = snapshot.val();
    //not recommended, look at "refresh bindings angular"
    $scope.$apply(); 
  });

});

Daniel Lesser · Accepted Answer · 2016-02-10 13:16:33Z

1

The problem is that $scope.customers is not an array [] but a complex JavaScript object {}.

If you changed it to:

$scope.customers=[];

And converted the complex hash table that Firebase is returning to an Array, it works (for sake of explanation, I'd first check if Firebase has a method to return an array rather than using this particular explanatory code):

$scope.myData.on('value', function(snapshot) {
var values = snapshot.val();
for(var myVal in values)
{
  var item = values[myVal];

  $scope.customers.push(item);
}
});

answered Feb 10, 2016 at 13:16

Daniel Lesser

2111 silver badge6 bronze badges

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

1 Comment

Dler Ari Over a year ago

Thank you Daniel Lesser, this worked perfectly. I will check if firebase have a method to return array.

Collectives™ on Stack Overflow

Angular JS search filter is not filtering the data by using Firebase

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related