एनजी-अगर इंडेक्स JSON Arrays के साथ

Question

मेरे पास items का JSON आउटपुट है - एक आइटम प्रदर्शित करने के लिए मैं ng-repeat="item in items" का उपयोग करता हूं। और मैं user

के साथ वर्तमान में लॉग इन उपयोगकर्ता ऑब्जेक्ट तक पहुंच सकता हूं प्रत्येक आइटम उपयोगकर्ताओं की एकाधिक इच्छासूची से संबंधित हो सकता है।

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

जब मैं कर user.id मैं वर्तमान की आईडी प्राप्त: एक उपयोगकर्ता उसकी इच्छा-सूची में कोई आइटम जोड़ता है तो user_id भीतर item.wishlists

सहेजा जाता है एक भी item की JSON आउटपुट सरलीकृत कुछ इस तरह दिखता है उपयोगकर्ता में लॉग इन

अब मैं जाँच करने के लिए ng-repeat="item in items" भीतर ng-if उपयोग करने के लिए करता है, तो पहले से ही अपने current_user इच्छा-सूची में इस मद जोड़ा गया है, और फिर इस उपयोगकर्ता एक बटन के बजाय "इच्छा-सूची में जोड़ें" की "इच्छा-सूची से निकालें" प्रदर्शित करना चाहते हैं।

मेरे काम नहीं कर रहा है दृष्टिकोण:

<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> 

मैं इस तरह indexOf का उपयोग कर सकते हैं? या यह देखने के लिए सही कोणीय जेएस तरीका क्या होगा यदि user.id item.wishlists user_id के भीतर है?

Update:

दृश्य: (ctrl.hasWished से आइकन में परिवर्तन 'पसंदीदा' अगर सही है 'favorite_border' यदि गलत पर)

<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> 

नियंत्रक:

// 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'); 
    } 
    } 

जब मैं बटन पर क्लिक करता हूं तो इससे पहले कि यह झूठा हो, तो यह पुट अनुरोध भेजता है, और मुझे टोस्टसेर भी मिलता है उपाध्यक्ष "जोड़ा ..", अगर मैं दोबारा क्लिक करता हूं तो यह DELETE अनुरोध और टोस्ट सेवा संदेश "हटाया गया .." भेजता है। लेकिन आइकन "पसंदीदा" से "पसंदीदा_बॉर्डर" में नहीं बदलता है। जब मैं पृष्ठ को फिर से लोड करता हूं तो सही आइकन प्रदर्शित होते हैं।

मैं भी सांत्वना के भीतर यह त्रुटि संदेश है:

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) 

और जब भी इस त्रुटि पर क्लिक:

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

फ़िल्टर करना चाहिए काम करता है:

<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> 

Answer 2

indexOf का उपयोग न करें, इस पोस्ट की जाँच करें: "वहाँ एक है विचार करने के लिए अंतिम पहलू: समानता। इंडेक्सऑफ विधि यह निर्धारित करने के लिए सख्त समानता (===) का उपयोग करती है कि कोई तत्व आपकी खोज से मेल खाता है या नहीं। यह स्ट्रिंग्स और संख्याओं जैसे प्राइमेटिव के लिए बहुत अच्छा काम करता है। लेकिन किसी दिए गए ऑब्जेक्ट को खोजने के लिए आपको indexOf का उपयोग करने में कठिनाई हो सकती है या सरणी " finding-array-elements-with-array-indexof

आप $ फ़िल्टर API Reference/ng/filter components in ng/filter का उपयोग कर सकते हैं, या हो सकता है कि आपको वर्तमान नियंत्रक के रूप में पास करने वाले अपने नियंत्रक में एक फ़ंक्शन बनाना चाहिए और user.id ऐसा करने या कस्टम निर्देश बनाने के लिए।इस जाँच करें कि आप अपने कस्टम समारोह के लिए एक विचार हैं: how-to-find-index-of-an-item-in-javascript-object-array/

सादर

Answer 3

आप इस कार्य के लिए indexOf समारोह का उपयोग नहीं कर सकते हैं। बजाय मैं नियंत्रक जो की जाँच करता है के भीतर गुंजाइश पर एक समारोह बनाने के लिए recommand अगर इच्छा सूची में शामिल है कि ढंग से उपयोगकर्ता शामिल हैं -

function isUserOnWishlist(item) { 
    return item.wishlists.some(function(wishlist) { 
     return wishlist.user_id === user.id; // (on $scope ?) 
    }); 
} 

दृश्य पर -

<a href="" ng-click="addToWishlist(item)" ng-if="!isUserOnWishlist(item.wishlists)">Wish</a> 
<a href="" ng-click="addToWishlist(item)" ng-if="isUserOnWishlist(item.wishlists)">Undo-Wish</a> 

isUserOnWishlist समारोह पुनरावृति जाएगा इच्छासूची पर प्रत्येक उपयोगकर्ता पर और केवल तभी वापस लौटाएं जब उसे कम से कम एक विशलिस्ट सूची मिल जाएगी जो इसे पास करती है - wishlist.user_id === user.id। यदि आप इच्छा सूची वस्तुओं की सूची की सूची की इच्छा रखते हैं तो आप indexOf फ़ंक्शन का उपयोग कर सकते थे।

मैं आपको एमडीएन जेएस सरणी फ़ंक्शन प्रलेखन की जांच करने की सलाह देता हूं, आप जेएस के साथ बॉक्स से बाहर आने वाले सभी शानदार सरणी कार्यों के बारे में स्पष्टीकरण पा सकते हैं।

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

अच्छी किस्मत।