Search code examples
javascriptangularfirebase-realtime-databaseangularfire

Iterating over an object from the database


i'm doing project with angular and firebase. I get an object from firebase and I would like to display it in html, but I don't know how to get value from the object in the array. How can I iterate through auto indexes from the firebase ?

This is calls Firebase:

getListTasks() {
  return this.db.list('/Tasks').valueChanges();
}

This is my component:

this.taskService.getListTasks().subscribe(t => {
      this.todoTasks = t;
    });

This is my object in the array : https://i.sstatic.net/npowv.jpg


Solution

  • You have to convert the object into an array for you to iterate over like below

      this.taskService.getListTasks().subscribe(tasks => {
    
      const tasksArray = Object.keys(tasks).map((key, index) => {
          const task = tasks[key];
          return task;
        });
        this.todoTasks = tasksArray;
      });
    

    Angular also has a built in mechanism for doing this using the key-value pipe

    I highly recommend this answer