Reading data from Firebase - angularjs

Question

I'm working on an ionic app, which I would like to integrate with firebase. I have the following code in my home.ts file:
export class HomePage {
UHSGetMonths$: Observable < any[] > ;
constructor(public navCtrl: NavController,
public platform: Platform,
private screenOrientation: ScreenOrientation,
private UHSMonths: UHSGetMonthsService,
public actionSheetCtrl: ActionSheetController,
private localNotifications: LocalNotifications,
public alertCtrl: AlertController) {
this.platform.ready().then((ready) => {
this.localNotifications.on('tap', (notification, state) => {
let json = JSON.parse(notification.data);
let alert = this.alertCtrl.create({
title: notification.title,
subTitle: json.fullMsq
});
alert.present();
});
});
//this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.PORTRAIT);
this.UHSGetMonths$ = this.UHSMonths
.getUHSMonthsList() // DB LIST
.snapshotChanges() // Give access to both Key and Value
.map(changes => {
return changes.map(c => ({
key: c.payload.key,
...c.payload.val(),
}));
});
}
}
I can successfully retrieve the data in my template files but how do get access a value in firebase database from the home.ts? In Firebase, I have meeting names and times for each month. E.g. for July, the team briefing takes place at 10am. How can I get the value 10am to use and manipulate in my home.ts?
Thanks
Firebase JSON file snippet:
[ {
"days" : [ {
"StaffBriefing" : "10:00",
"Team A Meeting" : "11:30",
"Team B Meeting" : "13:00",
"Team C Meeting" : "15:30",
"Date" : "01"
}, {
"StaffBriefing" : "14:00",
"Team A Meeting" : "12:45",
"Team B Meeting" : "14:00",
"Team C Meeting" : "16:30",
"Date" : "02"
}, {
"StaffBriefing" : "09:00",
"Team A Meeting" : "14:00",
"Team B Meeting" : "11:00",
"Team C Meeting" : "15:30",
"Date" : "03"
} ],
"monthName" : "January"
} ]
Update - 03/08/2018
Yes, I added the subscription code after the this.UHSGetMonths$. However, the following code worked:
`this.JubileeMonths
.getJubileeMonthsList() // DB LIST
.valueChanges()
.subscribe(data => {
console.log(data);
});`
And the console.log(data) displays:
If I do console.log(data[0]); I get this, which is fine.
However, If I try doing console.log(data[0].monthName); I get an error in my code editor (Atom) i.e. **Property 'monthName' does not exist on type '{}'` but in the console I get the correct value of January.
Why the error in the code editor or am I doing this all wrong?
Thanks.
UHSGetMonthsService
import { Injectable } from '#angular/core';
import { AngularFireDatabase } from 'angularfire2/database';
import * as moment from 'moment';
#Injectable()
export class UHSGetMonthsService {
private UHSGetMonthsRef$ = this.fbDB.list('UHS/Calendar/months');
constructor(private fbDB: AngularFireDatabase) {
}
getUHSMonthsList() {
return this.UHSGetMonthsRef$;
}
}

Answer 1

Given your database structure, you could do this after UHSGetMonths$ is set:
this.UHSGetMonths$
.subscribe(months => {
if (months && months.length) {
let month = months.find(m => m.monthName === 'January');
let day = month.days.find(d => d.Date === '02');
console.log(day['Team C Meeting']);
}
});
If you wanted to get the current month's name for the .find(), you'd need to either use this post's solution or momentjs.
If you wanted to get the current day of the month, you can use new Date().getDate() or momentjs again.
Update:
You're getting the error because you haven't defined the "shape" of the return data, so as far as your IDE knows, it's just a generic object. To fix this, create an interface that matches what the data looks like and use it on your list reference.
import { Injectable } from '#angular/core';
import { AngularFireDatabase } from 'angularfire2/database';
import * as moment from 'moment';
export interface Month {
monthName: string;
days: any[];
}
#Injectable()
export class UHSGetMonthsService {
private UHSGetMonthsRef = this.fbDB.list<Month>('UHS/Calendar/months');
constructor(private fbDB: AngularFireDatabase) {
}
getUHSMonthsList() {
return this.UHSGetMonthsRef;
}
}