If you've ever pressed the button, you'll see just 'one' black heart. If not, you'll see one 'white heart'

Issue

I'm a super beginner who just starting ionic Framework & Firebase. I know that there are many problems in the code that I wrote. However, please excuse me cuz I'm still in learning.

The function that I planned is this - If you've ever pressed the button, I wanna show you the 'black heart' when you signed it. If not, you'll see the 'white heart'.

firebase structure

comments{
    message: "hi~",
    user: "user name",
    userId: "user Id",
    userImgURI: "https://fbcdn-profile-a.akamaihd.net/hprofile-a..",
    like{
        -JmvN2CHvAOcBQCp2r0{
            uid: "facebook:69843548512"
        }
    }
}

html

<div class="item item-avatar item-icon-right" ng-repeat="comment in comments">
  <img ng-src="{{comment.userImgURI}}">
  <span class="commentUserName"><b>{{comment.user}}</b></span>
  <span class="commentMessage">{{comment.message}}</span>
  <i class="icon ion-chevron-right ion-trash-a" ng-show="comment.userId == authData.uid" ng-click="removeComment(comment.$id)"></i>
  <div ng-if="comment.like == null">
    <button ng-click="likeFunction({{comment}})" class="button button-light ion-ios-heart-outline likeBt"></button>
  </div>
  <div ng-repeat="like in comment.like">
    <div ng-if="like.uid == authData.uid">
      <button onclick="alert('You have already like.')" class="button button-light ion-heart"></button>
    </div>
    <div ng-show="like.uid != authData.uid">
      <button ng-click="likeFunction(comment)" class="button button-light ion-ios-heart-outline likeBt"></button>
    </div>
  </div>
</div>

controller

var commentsRef = new Firebase('https://choifirstproject.firebaseio.com/products/' + $scope.selectProductKey + '/comments');
$scope.comments = $firebaseArray(commentsRef);

$scope.likeFunction = function (comment) {
  var ref = new Firebase('https://choifirstproject.firebaseio.com/products/' + $scope.selectProductKey + '/comments/' + comment.$id);
  if ($rootsScope.authData) {
    ref.child('like').push({
      uid: $rootScope.authData.uid
    });
  }else{
    alert('Please login..');
  }
}

The problem

The problem is this. There's no problem if one user pressed the heart button. But when more than two users pressed it, the following problem happens. The output of heart button is duplicated as many as the number of peaple who pressed the button. I just want this; (1) If you've ever pressed the button, you'll see just 'one' black heart. (2) If not, you'll see one 'white heart'. What should I do? I'd appreciate some help.

Solution

Rather than using push(), which creates a random, unique, chronological id, just store them by the users' uid.

ref.child('like').child($rootScope.authData.uid).set(true);

Now you can refer to the values by user to see if their flag should be on or off. You'll probably also want to keep a total count of likes and that would be done with a transaction:

 ref.child('total_likes').transaction(function(currentValue) {
    return (currentValue||0)+1;
 });

Answered By - Kato