Angular HTTP Get Data fro Firebase - ERROR TypeError

JavaScript
1

Hi there!
I am getting this error fetching data from firebase.
ERROR TypeError: Cannot read properties of undefined (reading ‘name’)

Anybody can help me to solve this problem?
Here is the codes:

service.component.ts

export class FirebaseService {

  firebaseUrl =  'https://corsoangular-xxxxx-default-rtdb.europe-west1.firebasedatabase.app/service.json';

  constructor(private http: HttpClient) { }

  getService():Observable<any> {
    return this.http.get(this.firebaseUrl)
}
}

component.ts

export class ListComponent implements OnInit{
  firebaseUrl!: any[];

  constructor(private firebase: FirebaseService){}

  ngOnInit(): void {
  this.firebase.getService().subscribe((data: any) => {
      this.firebaseUrl = Object.keys(data).map((key) => {return data[data]})
      
      console.log(data)
      console.log(this.firebase)
    })
    }

  }

component.html

<div *ngFor="let user of firebaseUrl">
  <p>{{user.name}}</p> <p>{{user.email}}</p>
</div>
2

I don’t know anything about Angular but

Object.keys(data).map((key) => {return data[data]})

Shouldn’t you be using the key here?

All I can suggest is to log out the various variables and check them.

1 Like
3

I fixed like this:

  firebaseUrl: any[] = [];

  ngOnInit(): void {
  this.firebase.getService().subscribe((data: any) => {
      this.firebaseUrl = Object.keys(data).map((key) => {
        return data[key]
      })

      // console.log(data)
      console.log(this.firebaseUrl)
    })
    }

  }