Data fetch from firebase - firebase

Question

import { Component } from '#angular/core';
import { AngularFireDatabase, AngularFireList } from 'angularfire2/database';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
courses;
constructor(db: AngularFireDatabase) {
db.list('/courses').valueChanges()
.subscribe(courses => {
this.courses = courses;
console.log(this.courses);
});
}
}
Expected Behavior:
[Object, Object, Object, Object]
Actual Behavior:
["course 1", "course 2", {...}, {...}]
The above code returns an array but I expected an array of objects. Also the type returned but the valueChanges() is Observable<{}[]>. I want to know is it the normal behavior of valueChanges() i.e., returning an Observable as object along with an array. Please help me out and tell me where I am wrong in my code. I want an array of objects as an end result with this code.

Answer 1

to answer your question: yes, this is the normal behavior.
Since Firebase is a realtime database, it wants to keep track of any path you've queried and see if it changed ( no matter from where the change came from, you or your user )
I'm not sure what you're trying to do with the objects returned afterwards, but since the code is very minor, i would expect you just need to display it in some list with its values ...
So I would write something like this, where you can still access each item in the Array like it's an object:
# course.model.ts
export class courseModel {
title: string = "";
price: string = "";
author: string = "";
}
# app.component.ts
import { Component } from '#angular/core';
import { AngularFireDatabase, AngularFireList } from 'angularfire2/database';
import { Observable } from 'rxjs';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
courses : Observable<courseModel[]> = new courseModel();
constructor(db: AngularFireDatabase) {
this.courses = db.list('/courses').valueChanges();
}
}
# app.html
<p *ngFor="let course of courses | async">
{{ course.title }}
{{ course.author }}
{{ course.price }}
</p>

Answer 2

From https://github.com/angular/angularfire2/blob/master/docs/rtdb/lists.md
valueChanges()
What is it? - Returns an Observable of data as a synchronized array of JSON objects. All Snapshot metadata is stripped and just the method provides only the data.
So instead of getting [{ key: value }] you are getting [value].
If you want the full object, including key, use snapshotChanges().
You'll need to import map from rxjs/operators for this as well.
import { map } from "rxjs/operators";
db.list('/courses').snapshotChanges()
.pipe(map(snapshots => {
return snapshots.map(snapshot => {
let course = {};
course[snapshot.key] = snapshot.payload.val();
return course;
});
})).subscribe(courses => {
this.courses = courses;
console.log(this.courses);
});
This will return an array of users with the structure [{ key: value }]. If you want it formatted differently, like [{ "key": key, "value": value }], let me know and I'll update my answer.

Answer 3

It's a simple change and your code is work as it is
And it's worked for me
First you need to use data type any[] of courses
You need to use subscribe method instead of directly store valueChanges() value into variable
Because of angular older version support directly valueChanges() method to get values but in latest angular version you need to use subscribe method and assign value like this.
courses : any[];
constructor(db:AngularFireDatabase){
db.list('/courses').valueChanges().subscribe(courses=>
{
this.courses=courses;
console.log(this.courses);
});