Enhance information pushed to Firebase

Ionic Framework ionic-v3
1

Hi guys,

I’m following this tutorial http://www.joshmorony.com/building-a-crud-ionic-2-application-with-firebase-angularfire/ (Hi Josh :slight_smile: ) and I’m trying to enhance a bit the information that I send to firebase.
Basically I ask the user for an event title and a category, and then in the backend I want to add information, like the date and the participant limit for example.

It looks like my object gets created properly when I look a the console output (my newEvent has a date set as expected), but my firebase object gets only created with a title and a category. What the users inputs is there, but not the additional info I add at the object creation. Am i miss-using the ionic feature ?

The code of my event.ts

import { Component } from '@angular/core';
import { NavController, AlertController} from 'ionic-angular';
import {AngularFire, FirebaseListObservable} from 'angularfire2';
import { EventModel } from '../../app/models/eventmodel'

/*
  Generated class for the Event page.

  See http://ionicframework.com/docs/v2/components/#navigation for more info on
  Ionic pages and navigation.
*/
@Component({
  selector: 'page-event',
  templateUrl: 'event.html'
})
export class EventPage {
  events:FirebaseListObservable<any>;


  constructor(public navCtrl: NavController, public alertCtrl:AlertController, af:AngularFire) {
      this.events = af.database.list('/events');    
  }

  addEvent(alertCtrl:AlertController) {
      let prompt = this.alertCtrl.create({
          title: 'Event name',
          message: 'Enter the title of this event',
          inputs: [
              {
                  name: 'title',
                  placeholder: 'Title'
              },
              {
                  name: 'category',
                  placeholder: 'Category'
              }
          ],
          buttons:[
              {
                  text: 'Cancel',
                  handler: data => {
                      console.log('Cancel button clicked');
                  }
              },
              {
                  text: 'Save',
                  handler: data => {
                      var newEvent = this.createEvent(data);
                      console.log("location:" + newEvent.location + " - category:" + newEvent.category + " - date:"
                          + newEvent.date);
                      this.events.push(newEvent) ;
                      //this.events.push({title:data.title});
                  }
              }
          ]
      });
      prompt.present();

  }

  createEvent(data: any){
      var date = new Date();
      var genEvent = new EventModel(data.title, date , data.category, null, 20, []);
      return genEvent;

  }

  ionViewDidLoad() {
    console.log('Hello EventPage Page');
  }

}

Code for my eventModel.ts

import { Component } from '@angular/core';


export class EventModel {
    title:String;
    date:Date;
    location:any;
    category:String;
    maxSize: Number;
    participants:any[];

    constructor(title: String='Default', date: Date = null, category:String='',
        location: any=null, maxSize: Number=10, participants:any[]){
      this.title = title;
      this.date = date;
      this.location = null;
      this.category = category;
      this.maxSize = null;
      this.participants = participants;
    }

    
}

Thanks a lot!

2

I might have missed something, but my guess is that you’re uploading before the constructor completes. Might want your newEvent to return a Promise, and only have AngularFire push once the Promise is resolved.

Edited to add: There might be a simple fix of not declaring your null values in the constructor parameters. The Typescript might be transpiling to creation of an object, then modifying it, and your push happens in between.

3

I’ll have to dig deeper but the only time it captured the date for example was when by mistake I sent a number instead of a Date.

Is it possible that firebase would only take some type of info and not others (like Date) ?

Edit: correct http://stackoverflow.com/questions/30021133/how-do-you-save-a-date-field-in-firebase-using-angularfire