AngularFire Loop denormalized data

Question

I have categories and subcategories.

The structure of data is like the blog shows:

categories: {
    -JF1RmYehtF3IoGN9xHG(categoryId): {
      title:         


        

Answer 1

First, I'd recommend upgrading to the latest AngularFire version (currently 0.6), the API has changed quite a bit and it might be easier to accomplish what you're trying to do.

Second, you should only create one binding for each category and the subCategory IDs will automatically be included in that data since they're just the child nodes. Then you'll need to create a seperate binding just for the subcategory names, which you can then look up your ID.

Let's say your data looks like this:

categories: {
  -JF1RmYehtF3IoGN9xHG: {
    title: "Example",
    subcategories: {
      JF1RmYehtF3IoGN239GJ: true
    }
  }
},
subCategories: {
  JF1RmYehtF3IoGN239GJ: {
    name: "Example Subcategory",
  }
}

You'll create two bindings, one for categories and another for subcategories:

function MyController($scope, $firebase) {
  var ref = new Firebase("https://<my-firebase>.firebaseio.com/");
  $scope.category = $firebase(ref.child("categories/" + categoryID));
  $scope.subcategories = $firebase(ref.child("subCategories"));
}

And finally, in your view, use the ID you extract from $scope.category to get the sub category name from $scope.subcategories:

<ul ng-repeat="(id, val) in category.subcategories">
  <li>{{subcategories[id].name}}</li>
</ul>