Firebase + Ionic + Displaying Activity

I’ve connected to firebase and can pull data, push data, etc. and am having trouble with displaying a header with the date and all the activity under that date.

I have it structured as: User Profile > UID > Workouts > UID > Exercise, Date, Reps, Sets, Weight

First, is this a good structure (I’m a noob with databases)…

Second, how do i display the data in my activity feed with just one date and all the workouts for that date under that date header? … right now they’re pulling in all the data in order by date.

i would determine what are all of the potential queries before trying to lock into a specific data structure… based on your current question, i would restructure my data so that all workouts are stored under a date key.

Also you are using firebase realtime database, it might be easier to use firebase firestore

+1 Move to Firestore


So you might consider:

  • workouts
    • uid

For example:

export interface Workout {
  id?: string;
  uid?: string;
  userDisplayName?: string;
  createdAt?: firebase.database.ServerValue.TIMESTAMP;
  updatedAt?: firebase.database.ServerValue.TIMESTAMP;
  public list(uid: string): Observable<Workout[]>  {
    return this.db.colWithIds$('workouts', ref => ref.orderBy('updatedAt', 'asc').
      where('uid', '==', uid));


type CollectionPredicate<T> = string | AngularFirestoreCollection<T>;
type DocPredicate<T> = string | AngularFirestoreDocument<T>;


  col<T>(ref: CollectionPredicate<T>, queryFn?): AngularFirestoreCollection<T> {
    return typeof ref === 'string' ? this.afs.collection<T>(ref, queryFn) : ref;

  doc<T>(ref: DocPredicate<T>): AngularFirestoreDocument<T> {
    return typeof ref === 'string' ? this.afs.doc<T>(ref) : ref;

  colWithIds$<T>(ref: CollectionPredicate<T>, queryFn?): Observable<any[]> {
    return this.col(ref, queryFn).snapshotChanges().map(actions => {
      return => {
        const data: Object = as T;
        const id =;
        return { id, };

To format a TIMESTAMP:

{{item.updatedAt.toDate() | date: 'medium'}}

i am about to go cross-eyed with all the types defined here… :grinning:

Thank you guys! I’m def going to attempt to move to Firestore, seems like a cleaner, simpler way. Was just scared off since it’s in Beta in the Ionic docs…

It looks complicated (its not really) but it saves you a lot of boiler plate.


Can’t exactly see why you have different nested user Id’s under workout.

If you’re using angular fire then it will be a little different, but for straight firebase then:

export class YourClass {


  constructor() {}

ionViewDidLoad() {
//get the user id however you were and assign to theUserId

firebase.database().ref('users/' + theUserId + 'workouts/' + theUserId).on('value', (snap) => {
this.theDate = snap.val().mydate;
this.theExercise= snap.val().exercise;
this.theReps= snap.val().reps;
this.theSets = snap.val().sets;
this.theWeight: snap.val().sets

Then bind the variables to your template as you already are