3

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

1 Answer 1

2

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>
2
  • Would this be the right solution when this aren't categories and subcategories, but posts and users and you want to show a list of posts by a single user? There may be a lot of posts and a lot of users. I've tried many different ways to do this, but can't seem to find the right one. Commented Feb 14, 2014 at 10:53
  • If the subcategory list is really long, then it may not make sense to load it all. In that case, I'd fetch them one by one by creating a new $firebase instance for each subcategory (or probably just use the regular Firebase API).
    – Anant
    Commented Feb 14, 2014 at 18:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.