CODEWITHSUNDEEP
angularjsfirebaseangularfire
enigma
enigma

Reputation: 79

ng-repeat stuck in infinite loop angularfire 8.2

I'd like to figure out why this ng-repeat statement runs infinite. Item.members has a length of 2 and contains userIds = true 

<script type="text/ng-template" id="items_renderer.html">
     <label>
       <span class="team-description" ng-show="!item.editing">{{item.name}}</span>

       <label ng-repeat="memberId in item.members">
         <span>{{ getMember(memberId) }}</span>
       </label>
     </label>
</script>


 <div ui-tree="options" class="teamlist">
     <ol ui-tree-nodes ng-model="teams" class="panel-teams">
         <li ui-tree-node ui-tree-handle
          ng-repeat="item in teams"
          ng-include="'items_renderer.html'">
         </li>
     </ol>
 </div>

$scope.getMember = (memberId) ->
  memberobj = fbutil.syncObject('users/' + memberId)
  memberobj.$loaded().then (ref) ->
    $scope.teamUser.push ref.name
    console.log $scope.teamUser
    return $scope.teamUser

It will just keep running indefinite.

["Sven Woldt", "Sven Woldt", "Sven Woldt", "Sven Woldt", "Sven Woldt", "Sven Woldt", "Sven Woldt", "Sven Woldt", "Sven Woldt", "Yahoo", "Yahoo", "Yahoo", "Yahoo", "Yahoo", "Yahoo", "Yahoo", "Yahoo", "Yahoo", "Sven Woldt", "Yahoo", "Sven Woldt", "Yahoo", "Sven Woldt", "Yahoo",…]

So how could I restrict this to only return ["Sven Woldt", "Yahoo"]

Thanks for your help!

Upvotes: 0

Views: 243

Answers (2)

Frank van Puffelen
Frank van Puffelen

Reputation: 598728

Every time Angular renders this <span>{{ getMember(memberId) }}</span> you end up (re)loading that member from Firebase, which in turn triggers a re-render.

Your flow is like this:

  1. Angular starts to render your view
  2. Angular calls getMember
  3. getMember starts loading the data from Firebase
  4. At some point the data is loaded and your then is executed
  5. You push a new object onto the $scope, which in turn
  6. Tells Angular to re-render your view, so we go back to step 1

Your getMember code should check if it has already loaded this member before. If it did, it shouldn't try to reload it - or at least not push it into the $scope again.

Upvotes: 1

kubuntu
kubuntu

Reputation: 2535

It is indefinite because you keep pushing to $scope.teamUser in your $scope.getMember function. If you simply want to display name, why not try

$scope.getMember = (memberId) ->
  memberobj = fbutil.syncObject('users/' + memberId)
  memberobj.$loaded().then (ref) ->
    return ref.name

Upvotes: 1

Related Questions