angularFire get $id from nested object

Question

i have a situation where i have to put nested ng-repeat, when i am trying to get the $id of first ng-repeat i got it without any problem, but when i tried to get the $id of second ng-repeat (marked red in picture below) i got undefined.

my Firebase structure is as follows

here is items object

HTML Code and Controller are here

angular
  .module('starter')
  .controller('feedController', function($scope, $firebaseRef, $firebaseArray) {

    $scope.allRequests = $firebaseArray($firebaseRef.requests);

    $scope.allRequests.$loaded(function() {
      console.log(arguments);
    })

  })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<span ng-repeat="items in allRequests">   
    <!-- this works fine -->
      {{items.$id}}
      
      <div ng-repeat="item in items">
        
       <!-- getting undefined here... -->
      {{item.$id}}
      
    </div>
 </span>

i need $idof second ng-repeat, any help will be appreciated.

a little offtopic advice: you should not use block elements like div inside inline elements like span — Lulylulu
– Lulylulu, Commented Apr 14, 2016 at 13:49
@Lulylulu thanks, i'll look into it, but my first priority is to solve this issue. — Aamir shah
– Aamir shah, Commented Apr 14, 2016 at 13:52
@Aamirshah what you printed is the items object or you allRequests object ? Are you looking for the id 0347a3c0-.. or the KFJek... ? — Lulylulu
– Lulylulu, Commented Apr 14, 2016 at 14:02

VonD · Accepted Answer · 2016-04-14 14:06:37Z

7

You can use the (key, value) syntax to iterate over your items :

<div ng-repeat="(id, item) in items">
  {{id}}
  {{item.userName}}
</div>

What happens is that the $id and $priority are injected by angularfire on the node on which you made the request. It doesn't inject it in all the sub-nodes of this node, so your individual items do not have a $id property.

When you call ng-repeat="item in items", as items is an object, angular will iterate over your object's properties, and silently ignore the ones starting with $, because this prefix is often used internally by angular. This is a side-effect that angularfire takes advantage of (otherwise, in your item in items loop, you would iterate over $id and $priority). The (key, value) in object syntax gives you access to your child object's key.

edited Apr 14, 2016 at 14:06

answered Apr 14, 2016 at 14:00

VonD

5,1452 gold badges22 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Banjo Drill Over a year ago

Always wondered why this works. Thanks for the great explanation!

Collectives™ on Stack Overflow

angularFire get $id from nested object

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related