AngularFire 0.82 - How to query denormalised data?

Question

This question is similar to AngularFire - How do I query denormalised data? but I really do want an answer that uses AngularFire (current version is 0.82). This is an example of the data structure I use:

{
  "users": {
    "user1": {
      "name": "Alice",
      "lists": {
        "list1": "true"
      }
    },
    "user2": {
      "name": "Bob",
      "lists": {
        "list2": "true"
      }
    }
  },
  "lists": {
    "list1": {
      "title": "Example"
    },
    "list2": {
      "title": "Example2"
    }
  }
}

or, in a different notation: to get all of one user's lists we need all of these:

users/$userID/lists/$listID

and the lists' content is stored under:

lists/$listID

What I want to achieve is to be able to access the content of a specific user's lists, but without "manually" iterating over each $ListID.

An even nicer answer can include code that wraps that access in an AngularFire extended service, similar to the code under "Creating AngularFire Services" at AngularFire docs

Kato Kato · Accepted Answer · 2014-11-08T00:09:56

It would help (as it always does) to understand the use case we're trying to resolve rather than simply the solution you've picked to the problem--there are often simpler ways to approach the problem set (see What is the XY problem?).

There is nothing built into AngularFire to handle nested lists of lists. A list of specific elements would actually be quite a bit easier than several lists referenced from a list.

Firebase.util

A tool called Firebase.util exists to help with denormalization (it's currently getting revved to V2, due out in a month or two), and it's compatible with AngularFire:

var fbRef = new Firebase(URL);
var indexRef = fbRef.child('users/' + userId + '/lists');
var dataRef = fbRef.child('lists');
var joinedRef = Firebase.util.intersection(indexRef, dataRef);

var lists = $firebase( joinedRef ).$asArray();

Angular only

An angular-only approach would be to load the lists by hand and utilize AngularFire for the individual lists:

app.factory('NestedList', function($firebase, $timeout) {
   return function(indexRef, dataRef) {
      var hashOfLists = {};
      indexRef.on('child_added', function(snap) {
         var key = snap.key();
         var list = $firebase( dataRef.child(key).$asArray();
         hashOfLists[key] = list;
      });
      indexRef.on('child_removed', function(snap) {
         $timeout(function() {
            delete hashOfLists[snap.key()];
         });
      });
      return hashOfLists;
   }
});

note that this example uses snap.key(), but that only applies when using version 2.x of the SDK, which was just released this week; prev versions should use snap.name()

For more advanced operations and to create your own directives or services, check out the question and answer here. Although it may not appear at first glance, this is a pretty thorough discussion of how to take any Firebase data and transform it into any proprietary structure.

AngularFire 0.82 - How to query denormalised data?

1 Answers

Firebase.util

Angular only