Ad

Why Is My Firestore Document Wrapped Inside A MAP Object?

Upon pushing my event to firestore, my data inside the event ID's is wrapped inside another event(supposedly, map() object). Why is this the case? When access an event, I have to do "event.event.eventProperty" to access my information. The second event is defined on my database, but not in my code, so it results in errors that "event property does not exist on event".

Structure of data on Firestore

Structure of data on Firestore. Uncollapsed version

I have tried to backtrack the whole event creation process to see if I accidentally pushing my event wrong. So far, I have not been able to find the specific problem. I tried to console.log(event) at various parts of the code and it results in the right object, but upon pushing it, firebase nests the data inside another event object. ''' Event Interface

    export interface Event {

  event_title?: String, 
  event_location?: String,  
  event_students?: String, 
  event_category?: String, 
  event_date?: String, 

  event_startTime?: String, 
  event_endTime?: String, 
  event_description?: String, 
  event_pictureURL?: String, 
  event_chatNumber?: Number, 
  event_goingCounter?: Number, 
  event_maybeGoingCounter?: Number, 
  event_creation_timeStamp?: Date ,
  event_id?: Number, 
  createdBy?: String,
  lastUpdate?: Number
}

''Firebase-database-service'

createEvent(event: Event) {
   this.eventCollectionRef.add({

   event

  })
    .then(function() {
    console.log("Event was successfully created!");
})
    .catch(function(error) {
    console.log("Error Creating Event: ", error);
});

}

'tab3(Event Creation Screen)'

createEvent() {
    this.event = {  
    event_title: this.createEventForm.controls["event_title"].value,
    event_location: this.createEventForm.controls["event_location"].value,  
    event_students: this.createEventForm.controls["event_students"].value, 
    event_category: this.createEventForm.controls["event_category"].value, 
    event_date: this.createEventForm.controls["event_date"].value, 
    event_startTime: this.createEventForm.controls["event_startTime"].value, 
    event_endTime: this.createEventForm.controls["event_endTime"].value, 
    event_creation_timeStamp: this.createEventForm.controls["event_creation_timeStamp"].value,
    event_description: this.createEventForm.controls["event_description"].value,
    event_pictureURL: "", 
    event_chatNumber: 0, 
    event_goingCounter: 0, 
    event_maybeGoingCounter: 0,
    createdBy: this.user.uid

  }
    this.FirebaseDatabase.createEvent(this.event)
    this.showToast("Event has been created.");
  }

''This is where I retrieve my event with a specific id from firestore'

ngOnInit() {
    event: Event;

    this.firebaseDatabase.getEvent(this.id).subscribe( res => {
      this.event = res
      console.log(this.event["event"].event_category)
    })

  }

''GetEvent(id: string) definition'

getEvent(id:string) {

return this.eventsCollection.doc<Event>(id).valueChanges().pipe(take(1), map(event => {

    return event

}))

}

ERROR MESSAGE

Error Message on Console

Expected: Push my event object to firestore as is. Don't nest it.

Actual: Event object is nested inside a map.

Ad

Answer

This is because of the way you call add(...). Right now you have:

this.eventCollectionRef.add({
   event
})

This is shorthand syntax for:

this.eventCollectionRef.add({
   event: event
})

So that's why you see an extra event property level in your database. If you don't want that, remove the {}:

this.eventCollectionRef.add(event)
Ad
source: stackoverflow.com
Ad