Search code examples
angularjsfacebookfirebaseangularfirefirebasesimplelogin

Only show post if user is tagged in it and its not completed| angularfire | ionic


Hi im making an app to keep track of our friend group expenses.

The user logs in and the app creates an account(based on facebook account)

After this the user goes to a page with "open payments". i would like to filter the array of items based on if the current user is tagged in it.

<div class="list card" ng-repeat="post in posts | openPayments:loggedInUserId">
              <div class="item">
                <h2>{{post.naam}}</h2>
              </div>

              <div class="item item-body">
                <p>
                  {{post.onderwerp}}
                </p>
                <h2>${{post.prijs}}</h2>
              </div>

              <div class="item" ng-repeat="post in post.users">
                <h2>{{post.naam}} | {{post.voltooid}}</h2>
              </div>

        </div>

the json with data

"posts" : {
    "post1" : {
      "naam" : "Event cards",
      "onderwerp" : "de kaarten voor het concert van nickelback",
      "prijs" : "60.-",
      "users" : {
        "1056952907701290" : {
          "naam" : "Facebook Name1",
          "voltooid" : false
        },
        "1230912128457790" : {
          "naam" : "Facebook name2",
          "voltooid" : true
        }
      }
    }

So if i log in with userid 1056952907701290 i would only like to see the posts where i'm tagged in and are not "voltooid".

my controllers

app.controller('LandingCtrl', function($scope, $state, credentials, $filter, currentUser, $firebaseObject, $firebaseArray) {

       //array
       var ref = new Firebase("https://bla.firebaseio.com/posts");
       $scope.posts = $firebaseArray(ref);
       console.log($scope.posts);
       $scope.newItem = function(){
          $state.go("app.newItem");
       }
       //username
       $scope.username = currentUser.facebook.displayName;
       $scope.loggedInUserId = currentUser.facebook.id;
       console.log($scope.username);
       console.log($scope.loggedInUserId);
})
app.filter("openPayments", function() {

  return function(input, username) {

    var returnArr = [];
    // Go over each post
    for(var i in input) {

      // Go over each user
      angular.forEach(input[i].users, function(value, key) {
        console.log("key " + key);
        console.log(input);
        console.log("username " + username);

        // If it's the user we're looking for and voltooid is true, add the item to the array 
        if(key == username && value.voltooid) {
          returnArr.push(input[i]);
        }

      });

    }

    return returnArr;

  }

});

I did some research but couldn't really find how to filter on a subproperty.


Solution

  • angular.module('yourModule')
    
    .filter("openPayments", function() {
    
      return function(input, userId) {
    
        var filteredArr = [];
    
        // Go over each post
        for(var i in input) {
    
          // Go over each user
          for(var j in input[i].users) {
    
            // If it's the user we're looking for and voltooid is true, add the item to the array 
            if(j == userId && input[i].users[j].voltooid) {
              filteredArr.push(input[i]);
            }
    
          }
    
        }
    
        return filteredArr;
    
      }
    
    });
    

    Then you can use it like so:

    <div class="list card" ng-repeat="post in posts | openPayments:loggedInUserId">
    ...
    </div>