CODEWITHSUNDEEP
angularjsionic-frameworkfirebase
Nicolazinho
Nicolazinho

Reputation: 175

Reading child of an automated unique ID in a nested ng-repeat

How do I get data of a child of an automated unique ID in a nested ng-repeat, if the ID is not in the first level?

My firebase data set is structured as such (note: I do not know the amount or values of users, dates or unique IDs in that data set):

John:[

      10-12-2015: {

          "-JcFXid1A2G8EM7A_kwc": {
             "description" : "hi",
             "timestamp": "1449751857810"},

          "-JcFZP5FNtL4Yj6nja_7": {
             "description" : "this",
             "timestamp": "144975185345"},
      },

      11-12-2015: {

          "-JcFtGoZL7J-CCIjTYcL": {
             "description" : "is",
             "timestamp": "14497518513715"},

          "-JcFXid1A2G8EM7A_kwc": {
             "description" : "me",
             "timestamp": "1449751846956"},
      },

]

Thomas: [ ... ]

My HTML code is:

<ion-list>
    <ul class="list">

        <li ng-repeat="day in list">
            <ion-item class="item-divider">{{day.$id}}</ion-item>
            // That works as my output is "10-12-2015, etc"

            <li ng-repeat="key in day">
            // This does not work
                <ion-item>{{key.description}}</ion-item>
            </li>

        </li>

    </ul>
</ion-list>

I am new to Firebase and Angular so my apologies if I am missing something obvious. I also understand that Firebase recommends flat hierarchies, but sorting it by user and date is important for data analysis I need to do. But I would be open to suggestions.

FYI - My controller looks like this:

.controller('summaryCtrl', ['$scope','$state','$firebase','$firebaseArray','SessionData', '$ionicPopup', function($scope,$state,$firebase,$firebaseArray,SessionData,$ionicPopup){

var firebaseObj = new Firebase("https://id.firebaseio.com/" + userid);
  var fbArray = $firebaseArray(firebaseObj);

  fbArray.$loaded()
  .then(function(){
      $scope.list = fbArray;
  })
}])

Thanks.

Upvotes: 1

Views: 181

Answers (1)

David East
David East

Reputation: 32604

You don't need to use .$loaded(), the $firebaseArray will take care of triggering $digest when the data is loaded. The .$loaded() promise is useful for resolving in routes.

In your case though you need to go down into the day key to create the array. Try a data structure like below:

{
  "userMessages": {
    "$uid": {
       "$message_id": { 
         "timestamp": 1450048003760 // use a timestamp
       }
     }
  }
}

This way you can get messages per user by: /userMessages/$uid/. Then using a query you can get them by date.

You can create factory to simplify this.

Don't mind the code structure below, it uses the Angular Styleguide.

angular.module('app', ['firebase'])
  .constant('FirebaseUrl', '<my-firebase-app>')
  .service('rootRef', ['FirebaseUrl', Firebase])
  .factory('messages', Messages)
  .controller('SummaryCtrl', SummaryCtrl);

function Messages(rootRef, $firebaseArray) {
  return function Messages(userid, date) {
    // turn the date into a timestamp
    var timestamp = date.getTime();
    var messagesRef = rootRef.child('userMessages').child(userid);
    // query for messages on that day
    var query = messagesRef.orderByChild('timestamp').endAt(timestamp);
    return $firebaseArray(query);
  };
}

function SummaryCtrl($scope, messages, rootRef) {
  var user = rootRef.getUser()
  var today = new Date();
  $scope.messages = messages(user.uid, today);
}

Upvotes: 1

Related Questions