AngularFire Loop denormalized data - firebase

Question

I have categories and subcategories.
The structure of data is like the blog shows:
categories: {
-JF1RmYehtF3IoGN9xHG(categoryId): {
title: "Example",
subcategories: {
JF1RmYehtF3IoGN239GJ(subCategoryId): true
}
To now i retrieved the data this way(for just one category):[controller]
$scope.findOneCategory = function (categoryId) {
angularFire(Categories.find(categoryId), $scope, 'category');
}
And Categories service
find: function(categoryId) {
return FireRef.categories().child('/'+categoryId);
},
This works good!
But now i need to retrieve a list of subcategories in category and bind it to the scope and i dont know how...i have currently this:
The view:
<div ng-init="findSubCategories()">
<li class="list-group-item" ng-repeat="subCategory in subCategories">{{ subCategory.name }}</li>
The controller:
$scope.findSubCategories = function() {
angularFire(Categories.findSubCategories($routeParams.categoryId), $scope, 'subCategories');
}
And the service look like this i tried something but it's wrong and have no idea how it should looks like... if anyone could help i would be so glad!
findSubCategories: function(categoryId) {
var subCategoriesIdsList = FireRef.categories().child('/'+categoryId).child('subcategories');
subCategoriesIdsList.on("child_added", function(snap) {
FireRef.subcategories().child("/"+snap.name()).once("value", function(snap) {
// Render the comment on the link page.
console.log(snap.val());(i see the object in console but have no idea how to bind it now with the view...:(
});
});
},
dont know how to bind this with angular view

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>