Angular x Firebase, firebase wont output data in DOM, ‘GET request’

Published

I have a realtime database in Firebase, and the POST request works, When I want to get the info from the database and GET it into the HTML file, it wont work and in the console its showing me this error: "Cannot find a differ supporting object ‘[object Object]’ of type ‘object’. NgFor only supports binding to Iterables such as Arrays."

http.service.ts

//GET users
  getUsers() {
    return this.http
      .get(
        'https://n22-f7ae3-default-rtdb.europe-west1.firebasedatabase.app/users.json'
      )
      .pipe(
        map((res) => {
          return res;
        })
      );
  }

home.component.ts

newUser: any;

//I have called it in 'ngOnInit' too.
getAllUsers() {
    this.http.getUsers().subscribe((res) => {
      this.newUser = res;
    });
  }

home.component.html

<tbody>
      <tr *ngFor="let list of newUser">
        <th scope="row">{{ list.id }}</th>
        <td>{{ list.user }}</td>
        <td>{{ list.mail }}</td>
      </tr>
</tbody>

Source: Angular Questions

Answers

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Still Have Questions?


Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us
faq