Filter ng-repeat with Firebase Data

Question

I have a set of events that I repeat, and they can already be filtered by a search box.

<div class="well well-sm" ng-repeat="allEvent in allEvents | filter:searchText | orderBy:sortOrder" ng-if="allEvent.event.name">
   <h3 id="cabynTitles">{{allEvent.event.name}}</h3>
   <h3 id="cabynMemNum">{{allEvent.event.time}} </h3>
   <button class="btn" ng-click="joinEvnt(allEvent.event.$id)">Join</button>
</div>

However, I'm stuck trying not show events the user is already going to. These events are stored in firebase.

.filter('myEvents', function () {
return function (items) {
    var filtered = [];
    for (var i = 0; i < items.length; i++) {
    var item = items[i];
    var ref = new Firebase(furl + "/users/" + auth.uid + "/events/");
      if (ref.child.equalTo(allEvent.event.$id) !== allEvent.event.$id) {
        filtered.push(item);
           } }
      return filtered;
   } }])

I think it's supposed to look something like this, but I can't pass the 'allEvent.event.$id' to the filter (which is the firebase key for the event). Any help would be awesome, thanks!

Edit

Current data looks like-

myEvents:

"events": {
      "-KAw4iDuN2KdN-5pfQs0": true,  //Instead of true, I can also make this the uid
      "-KAw7Nn04WEoTDbatPn4": true
}

All Events: I'm using geofire, so I get each event back during the geoQuery function, and with that I get all the event details.

"-KAw4iDuN2KdN-5pfQs0": {
        "name": "Event Name"
        "description": "Blah blah"
         ...
}

I realize now the data has to be filtered before I ng-repeat it, and since I'm using geoFire, I'm trying to filter it with something like this during geoQuery:

if (myEvents.indexOf(key) == -1) {
    //push evenDetails to array to show in scope
};

Where key is the uid of an event, and myEvents is the firebaseArray of the myEvents data from above. But I'm guessing indexOf doesn't work on firebaseArrays? Because this isn't working.

Answer 1

You're hitting two problems here:

1. Firebase can only query based on the presence of a value, not on the absence of a value
2. Firebase can only query for a single value, not for multiple values

So your solution will be to:

1. load the complete list of events
2. load the list of events the user is going to
3. loop over #1 and exclude any event that's also in #2
4. bind the result list to the $scope

Update This snippet shows how to accomplish step 3 with the JSON structures you describe.

 var myEvents = { "-KAw4iDuN2KdN-5pfQs0": true, "-KAw7Nn04WEoTDbatPn4": true }; var allEvents = { "-KAw4iDuN2KdN-5pfQs0": { "name": "Event Name", "description": "Blah blah" }, "-KAw7Nn04WEoTDbatPn4": { "name": "Event Name 2", "description": "Blah blah" }, "-KAw7Nn04WEoTDbatl9": { "name": "Event Name 3", "description": "Blah blah" } }; var filteredEvents = []; Object.keys(allEvents).forEach(function(eventKey) { if (Object.keys(myEvents).indexOf(eventKey) == -1) { filteredEvents.push(allEvents[eventKey]); } }); document.getElementById('log').innerText = JSON.stringify(filteredEvents); 

 <pre id='log'></pre> 

Note that there are many other ways to accomplish the same. For example: a Firebase Snapshot, already has a forEach() method that loops over its children. And you can get the key of the current child Snapshot with child.getKey() .