AngularFire, access deep child links?

Question

Using latest Angular with Firebase and I'm trying to access somewhat deep nested items from logged in users.

The structure looks something like this: firebase -> users -> user-uid -> email/name/pass/lists/ (where lists have) -> list-uid -> item-uid -> item-name.

I want to access that last name-child (preferably through an ng-repeat since they're list items and I want them displayed on each users dashboard).

I've been trying different methods but the closest one are this:

$scope.user = $firebaseObject(ref.child('users').child(authData.uid));

And then in my html (for now):

<span>{{user.lists}}</span>

Which prints out something like: {"-uid":{"age":"21", "name":"martin"},{"-uid":{"age":"25", "name":"john"}}} etc etc etc.

The ref goes to:

        var ref = new Firebase('https://url.firebaseio.com');

Any ideas? Thanks!

Edit: I tried to add a ng-repeat like this:

<li ng-repeat="list in user.lists">{{list.name}}</li>

Which somewhat works, it shows me the objects I've put in which are static but not the ones "one level deeper"...

Edit 2: Updated with .json for structure. I can get the "me" out of name but not "mjölk" which are a level deeper:

"users" : {
"8a6da12a-0992-43f5-bb33-95ddd49fed8c" : {
  "email" : "[email protected]",
  "lists" : {
    "-KDjNYC8GS2QFHYyp74L" : {
      "age" : "other",
      "name" : "me"
    },
    "8a6da12a-0992-43f5-bb33-95ddd49fed8c" : {
      "-KDjN_NkTQmj_1R00xZL" : {
        "done" : false,
        "id" : 1458936351305,
        "name" : "mjölk"
      },
      "-KDjN_r0WmT6xiZwadO5" : {
        "done" : false,
        "id" : 1458936351305,
        "name" : "ägg"
      },
      "-KDjNagkBWmJRj6oQqc2" : {
        "done" : false,
        "id" : 1458936351305,
        "name" : "rejv"
      },
      "-KDjNb5Fpak_9A_rvn8W" : {
        "done" : false,
        "id" : 1458936351305,
        "name" : "kossor"
      },
      "-KDjOVtAFJoYVNUkapNC" : {
        "done" : false,
        "id" : 1458936351305,
        "name" : "piss"
      },
      "-KDjOlemXR2eOoqPBh0v" : {
        "done" : false,
        "id" : 1458936677873,
        "name" : "mjölk igen"
      }
    }
  },

Instead of describing your data structure, include a snippet of the actual JSON tree in your question (as text, not a screenshot). You can easily get this by clicking the Export button in your Firebase database. — Frank van Puffelen
Although from scanning the description, it looks like you're nesting lists. There are many reasons why the Firebase documentation recommends to nest data sparingly and this is one of them. — Frank van Puffelen
I've read through it a few times but I'm not sure how I should build the structure differently. I want the logged in users to be able to make their own lists, only showing the ones they created themselves (through their uid). Maybe all of the "other" uid's are redundant but I can't seem to get rid of them. I'd love to have an uid ONLY to the user and list, not each item. I'll update the main post with .json right away! — mtorn

Frank van Puffelen Frank van Puffelen · Accepted Answer · 2016-03-25T21:36:12

As I said in my comment already: part of your problem is caused by the fact that you are nesting lists. There are many reasons why the Firebase documentation recommends to nest data sparingly and this is one of them.

To unnest the data, you store the user profiles separately from the lists for each user:

"users" : {
  "8a6da12a-0992-43f5-bb33-95ddd49fed8c" : {
    "email" : "[email protected]",
  }
},
"user_lists" : {
  "-KDjNYC8GS2QFHYyp74L" : {
    "age" : "other",
    "name" : "me"
  },
  "8a6da12a-0992-43f5-bb33-95ddd49fed8c" : {
    "-KDjN_NkTQmj_1R00xZL" : {
      "done" : false,
      "id" : 1458936351305,
      "name" : "mjölk"
    },
    "-KDjN_r0WmT6xiZwadO5" : {
      "done" : false,
      "id" : 1458936351305,
      "name" : "ägg"
    },
    "-KDjNagkBWmJRj6oQqc2" : {
      "done" : false,
      "id" : 1458936351305,
      "name" : "rejv"
    },
    "-KDjNb5Fpak_9A_rvn8W" : {
      "done" : false,
      "id" : 1458936351305,
      "name" : "kossor"
    }
  }
}

Now if you want to show a list of profile and the lists for the current user, you:

var ref = new Firebase('https://yours.firebaseio.com');
$scope.users = $firebaseArray(ref.child('users'));
$scope.lists = $firebaseArray(ref.child('user_lists').child(auth.uid));

And then in your HTML:

<p>Users:</p>
<ul>
  <li ng-repeat="user in users">{{user.email}}</li>
</ul>

<p>Lists for you:</p>
<ul>
  <li ng-repeat="list in lists">{{list.name}}</li>
</ul>

AngularFire, access deep child links?

1 Answers