ng-if indexOf with JSON Arrays

Question

I have a JSON Output of items - To display a single item i use ng-repeat="item in items". And I can access the currently logged in user object with user

Each item can belong to multiple wishlists of users. If a user adds an item to his wishlist the user_id gets saved within item.wishlists

The JSON Output of a single item looks simplified something like this:

{"id":1,"title":"This is a tile","wishlists":[{"user_id":2},{"user_id":3}]}

when i do user.id i get the ID of the current logged in user.

Now I want to use ng-if within the ng-repeat="item in items" to check if the current_user has already added this item to his wishlist, and then to display this user an "remove from wishlist" button instead of "add to wishlist".

My not working approach is:

<div ng-repeat="item in items">
  <h3>{{item.title}}</h3>
  <a href="" ng-click="addToWishlist(item)" ng-if="item.wishlists.indexOf(user.id) == -1">Wish</a>
  <a href="" ng-click="removeFromWishlist(item)" ng-if="item.wishlists.indexOf(user.id) > -1">Undo-Wish</a>
</div>

Can I use indexOf like this? Or what would be the correct angularJS way to check if user.id is within item.wishlists user_id's?

Update:

View: (ctrl.hasWished changes the icon from 'favorite' if true to 'favorite_border' if false)

<div ng-repeat="item in items">
      <md-button class="md-icon-button feed-wish md-warn" aria-label="Wish" ng-click="ctrl.toggleWish(item)">
        <i class="material-icons">favorite{{ctrl.hasWished(item) ? '' : '_border' }}</i>
      </md-button> 
</div>

Controller:

  // Check if User has wished this item already: Should return true or false
  this.hasWished = function(item) {
    return item.wishlists.some(function(wishlist) {
      return wishlist.user_id === Auth._currentUser.id; // returns true if currently logged in user id is on wishlist
    });
  };

  this.toggleWish = function(item) {
    if (!this.hasWished) {
      this.hasWished = true;
      items.wish(item); // sends PUT request
      ToastService.show(item.product + ' added to Wish List');
    } else {
      this.hasWished = false;
      items.unWish(item); // sends DELETE request
      ToastService.show(item.product + ' removed from Wish List');
    }
  }

When I click on the button if its false before, it sends the PUT request, and I also get the ToastService message "added..", if I click again it sends the DELETE request and the ToastService message "removed..". But the Icon doesn't change from "favorite" to "favorite_border". When I reload the page the right Icons are displayed.

I also have this error message within the console:

TypeError: Cannot read property 'id' of null
    at http://ruby-on-rails-140223.nitrousapp.com:3000/assets/auctions/auctionCtrl-f2cb59b8ad51e03a2264ef2c6e759a54.js?body=1:33:52
    at Array.some (native)
    at hasWished (http://ruby-on-rails-140223.nitrousapp.com:3000/assets/auctions/auctionCtrl-f2cb59b8ad51e03a2264ef2c6e759a54.js?body=1:32:30)
    at fn (eval at <anonymous> (http://ruby-on-rails-140223.nitrousapp.com:3000/assets/angular/angular-81b9b668c3f93c8ccb76b27ad984d9b6.js?body=1:13323:15), <anonymous>:4:318)
    at Object.expressionInputWatch [as get] (http://ruby-on-rails-140223.nitrousapp.com:3000/assets/angular/angular-81b9b668c3f93c8ccb76b27ad984d9b6.js?body=1:14303:31)
    at Scope.$digest (http://ruby-on-rails-140223.nitrousapp.com:3000/assets/angular/angular-81b9b668c3f93c8ccb76b27ad984d9b6.js?body=1:15819:40)
    at Scope.$apply (http://ruby-on-rails-140223.nitrousapp.com:3000/assets/angular/angular-81b9b668c3f93c8ccb76b27ad984d9b6.js?body=1:16098:24)
    at done (http://ruby-on-rails-140223.nitrousapp.com:3000/assets/angular/angular-81b9b668c3f93c8ccb76b27ad984d9b6.js?body=1:10547:47)
    at completeRequest (http://ruby-on-rails-140223.nitrousapp.com:3000/assets/angular/angular-81b9b668c3f93c8ccb76b27ad984d9b6.js?body=1:10745:7)
    at XMLHttpRequest.requestLoaded (http://ruby-on-rails-140223.nitrousapp.com:3000/assets/angular/angular-81b9b668c3f93c8ccb76b27ad984d9b6.js?body=1:10686:9)

and when clicking also this error:

TypeError: v2.hasWished is not a function
    at fn (eval at <anonymous> (http://ruby-on-rails-140223.nitrousapp.com:3000/assets/angular/angular-81b9b668c3f93c8ccb76b27ad984d9b6.js?body=1:13323:15), <anonymous>:4:318)
    at Object.expressionInputWatch [as get] (http://ruby-on-rails-140223.nitrousapp.com:3000/assets/angular/angular-81b9b668c3f93c8ccb76b27ad984d9b6.js?body=1:14303:31)
    at Scope.$digest (http://ruby-on-rails-140223.nitrousapp.com:3000/assets/angular/angular-81b9b668c3f93c8ccb76b27ad984d9b6.js?body=1:15819:40)
    at Scope.$apply (http://ruby-on-rails-140223.nitrousapp.com:3000/assets/angular/angular-81b9b668c3f93c8ccb76b27ad984d9b6.js?body=1:16098:24)
    at HTMLButtonElement.<anonymous> (http://ruby-on-rails-140223.nitrousapp.com:3000/assets/angular-touch/angular-touch-b4d02ed602708a1c93b51087222e0363.js?body=1:478:13)
    at HTMLButtonElement.eventHandler (http://ruby-on-rails-140223.nitrousapp.com:3000/assets/angular/angular-81b9b668c3f93c8ccb76b27ad984d9b6.js?body=1:3299:21)

Answer 1

Filter should works:

<div ng-repeat="item in items">
  <h3>{{item.title}}</h3>
  <a href="" ng-click="addToWishlist(item)" ng-if="!(item.wishlists|filter:{user_id:user.id}).length">Wish</a>
  <a href="" ng-click="removeFromWishlist(item)" ng-if="(item.wishlists|filter:{user_id:user.id}).length">Undo-Wish</a>
</div>