Iterate with AngularFirestoreCollection object in Ionic

Question

Iterate with AngularFirestoreCollection object in Ionic

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

I would like to know how I can show the information contained in the attached image, because I have tried it in many ways but there is no way.

I'm using cloud firestore, and for now I get the following:

interface HourTask {
  inicio: string;
  fin: string;
}

todo: Observable<HourTask[]>;

 this.todo = this.asf.collection<HourTask>('extraHours/SAW5riljv0EAU1bp1Dm6/Fecha', ref => {
  return ref;
}).snapshotChanges()
  .map(actions => {
    return actions.map(a => {
      //console.log(a);
      const data = a.payload.doc.data() as HourTask;
      // Me gustaría poder devolver evento, inicio y fin de cada tarea. Adjunto foto
      return { event, inicio, fin };
    })
  });

Thank you very much.

Error capture in WebStorm:

Capture when I launch the app:

ionic ionic-framework ionic2 ionic3

asked by Alejandro Suarez 30.03.2018 в 13:23

source

2 answers

Error installing MS Deploy Close a modal when comparing what profile you have

score 1 · Answer 1

My solution at the end was the following:

this.todoCollection = this.asf.collection('extraHours/SAW5riljv0EAU1bp1Dm6/Fecha');
this.todoCollection.snapshotChanges().subscribe(todoList => {
    this.todo = todoList.map(item => {
        const data = item.payload.doc.data() as HourTask;

        return {
            inicio: data['Inicio'],
            fin: data['Fin']
        }
    })
})

score 0 · Answer 2

In your map function you have the following:

actions => {
  return actions.map(a => {
  const data = a.payload.doc.data() as HourTask;
  // Me gustaría poder devolver evento, inicio y fin de cada tarea. Adjunto foto
  return { event, inicio, fin };
}

I see two problems:

You declare a constant data , where you save the object HourTask , but then you do not use it to return the values.
Viewing the image when you debug, your HourTask interface definition does not match what's in data .

In your role you should do something like

actions => {
    return actions.map(a => {
      const data = a.payload.doc.data() as HourTask;
      const keys= Object.keys(data); // ['Indianos', 'Sardina']
      return keys.map((key)=> ({ event: key, inicio: data[key].Inicio, fin: data[key].Fin}));
    }