Firebase.child failed Error

Ionic Framework ionic-v3
1

Firebase.child failed: First argument was an invalid path: “undefined”. Paths must be non-empty strings and can’t contain “.”, “#”, “$”, “[”, or “]”

How to resolve this error in using firebase with Ionic 3.

I am getting this error on click of delete button.to delete an event from the list of events.


import { Component } from '@angular/core';
import { IonicPage, NavController } from 'ionic-angular';
import { EventProvider } from '../../providers/event/event';
import firebase from'firebase';
@IonicPage({
  name: 'event-list'
})
@Component({
  selector: 'page-event-list',
  templateUrl: 'event-list.html',
})
export class EventListPage {
  public eventList: Array<any>;

  constructor(public navCtrl: NavController, public eventProvider: EventProvider) {}

  ionViewDidEnter() {
    this.eventProvider.getEventList().on('value', snapshot => {
      this.eventList = [];
      snapshot.forEach( snap => {
        this.eventList.push({
          id: snap.key,
          name: snap.val().name,
          price: snap.val().price,
          date: snap.val().date,
        });
        return false
      });
    });
  }

  del(eventId)
  {
firebase.database().ref(`eventList`).child(eventId).remove();
  }

  goToEventDetail(eventId){
    this.navCtrl.push('event-detail', { 'eventId': eventId });
  }

}


<ion-content padding>
  <ion-list>
    <ion-item-sliding *ngFor="let event of eventList" >
      <ion-item>
      <h2>{{event?.name}}</h2>
      <p>Ticket: <strong>${{event?.price}}</strong></p>
      <p>Date: <strong>{{event?.date}}</strong></p>
      </ion-item>
     <ion-item-options side="left">
   <button ion-button color="danger" (click)="del(event.eventId)">
      <ion-icon name="md-trash">   Delete  </ion-icon>
    </button>
  </ion-item-options>
  </ion-item-sliding>
  </ion-list>
</ion-content>
2

Before deleting set up a:

del(eventId)  {
  console.log(eventId);
  firebase.database().ref(`eventList`).child(eventId).remove();
}

To see if the event ID is passing because it seems like you’re sending null or undefined as the ID.

UPDATE: Taking a second look at your code I notice that you should be passing id instead of eventId in the html:

<button ion-button color="danger" (click)="del(event.id)">
  <ion-icon name="md-trash">   Delete  </ion-icon>
</button>
3 
ionViewDidEnter() {
    this.eventProvider.getEventList().on('value', snapshot => {
      this.eventList = [];
      snapshot.forEach( snap => {
        this.eventList.push({
          id: snap.key,
          name: snap.val().name,
          price: snap.val().price,
          date: snap.val().date,
        });
        return false
      });
    });
  }

 
del(eventId)  {
  console.log(eventId);
  firebase.database().ref(`eventList`).child(eventId).remove();
}

<ion-content padding>
  <ion-list>
    <ion-item-sliding *ngFor="let event of eventList" >
      <ion-item>
      <h2>{{event?.name}}</h2>
      <p>Ticket: <strong>${{event?.price}}</strong></p>
      <p>Date: <strong>{{event?.date}}</strong></p>
      </ion-item>
     <ion-item-options side="left">
   <button ion-button color="danger" (click)="del(event.id)">
      <ion-icon name="md-trash">   Delete  </ion-icon>
    </button>
  </ion-item-options>
  </ion-item-sliding>
  </ion-list>
</ion-content>

-KtGNWcmgfDK83lu_jSU

I am getting this as Id

4

image
image.png1366×768 122 KB

This is the same id of the event which I want to delete

image
image.png1366×768 143 KB

5

AHHHHHHHH I see.

You’re trying to use:

firebase.database().ref(`eventList`).child(eventId).remove();

But your Firebase database shows that your data actually follows this path:

firebase.database().ref(`/userProfile/${userId}/eventList`).child(eventId).remove();
1 Like
6

On doing that,I am getting the whole list deleted ,but I want to delete a particular event only,on which I am sliding the delete button.
How to make it particular for that event.

7

Are you passing the correct eventId?

firebase.database().ref(`/userProfile/${userId}/eventList/${eventId}`).remove();
1 Like
8

How can I pass particular eventId,according to the event which we want to delete

9

Upload your app to Github and link it here so I can take a look, because it should be working

1 Like
10 


import { Injectable } from '@angular/core';
import firebase from 'firebase';

@Injectable()
export class EventProvider {
  public userProfileRef:firebase.database.Reference;
  constructor() {
    firebase.auth().onAuthStateChanged( user => {
      if (user) {
        this.userProfileRef = firebase.database().ref(`userProfile/${user.uid}`);
      }
    });
  }

  getEventList(): firebase.database.Reference {
    return this.userProfileRef.child('/eventList');
  }

  getEventDetail(eventId:string): firebase.database.Reference {
    return this.userProfileRef.child('/eventList').child(eventId);
  }



delete(eventId)
{
this.userProfileRef.ref.child(`/eventList/${eventId}`).remove();
}

  createEvent(eventName: string, eventDate: string, eventPrice: number, 
    eventCost: number): firebase.Promise<any> {
    return this.userProfileRef.child('/eventList').push({
      name: eventName,
      date: eventDate,
      price: eventPrice * 1,
      cost: eventCost * 1,
      revenue: eventCost * -1
    });
  }

  addGuest(guestName, eventId, eventPrice, guestPicture = null): firebase.Promise<any> {
    return this.userProfileRef.child('/eventList').child(eventId)
    .child('guestList').push({
      guestName: guestName
    })
    .then((newGuest) => {
      this.userProfileRef.child('/eventList').child(eventId).transaction( event => {
        event.revenue += eventPrice;
        return event;
      });
      if (guestPicture != null) {
        firebase.storage().ref('/guestProfile/').child(newGuest.key)
        .child('profilePicture.png').putString(guestPicture, 'base64', {contentType: 'image/png'})
        .then((savedPicture) => {
          this.userProfileRef.child('/eventList').child(eventId).child('guestList')
          .child(newGuest.key).child('profilePicture').set(savedPicture.downloadURL);
        });        
      }
    });
  }

}

export class EventListPage {
  public eventList: Array<any>;
  public userProfileRef:firebase.database.Reference;
  constructor(public navCtrl: NavController, public eventProvider: EventProvider) {

  }

  ionViewDidEnter() {
    this.eventProvider.getEventList().on('value', snapshot => {
      this.eventList = [];
      snapshot.forEach( snap => {
        this.eventList.push({
          id: snap.key,
          name: snap.val().name,
          price: snap.val().price,
          date: snap.val().date,
        });
        return false
      });
    });
  }

 
del(id)  {
 // console.log(user);
    this.eventProvider.delete(id);
}

<ion-content padding>
  <ion-list>
    <ion-item-sliding *ngFor="let event of eventList" >
      <ion-item>
      <h2>{{event?.name}}</h2>
      <p>Ticket: <strong>${{event?.price}}</strong></p>
      <p>Date: <strong>{{event?.date}}</strong></p>
      </ion-item>
     <ion-item-options side="left">
   <button ion-button color="danger" (click)="del(event.eventId)">
      <ion-icon name="md-trash">   Delete  </ion-icon>
    </button>
  </ion-item-options>
  </ion-item-sliding>
  </ion-list>
</ion-content>

I am trying this but nothing happens on click of the delete button

11

Please let me know if you got my mistake here,so that I would add it in Github then…

12

Yes, that’s because as I said at the beginning, you’re using:

<button ion-button color="danger" (click)="del(event.eventId)">

When you need to be using:

<button ion-button color="danger" (click)="del(event.id)">
1 Like
13

Yup that works…
Thanks so much for your guidance Always.:slight_smile:

14

@javebratt, Ionic Forum’s own Firebase support person :smiley: :smiley: Awesome.

1 Like
15

heheh thanks, trying to do my best :slight_smile:

1 Like
16

@javebratt am facing same problem can you please help me