How exactly works this example that use Angularfire2 to retrieve a list from a Firebase DB?

Question

I am not so into JavaScript\TypeScript and I have some problem to understand how exactly works this example used into an Angular application to retrieve data from a Firebase database. It works fine but I have some doubts about its logic (I think that it should be something related to functional programming paradigm and I am not so into this topic).

So I have this code that uses Angularfire2 library (the new ^5.0.0-rc.4 version) to query my Firebase DB:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';

   courses$: Observable<{}[]>;

    constructor(private db: AngularFireDatabase) {
        console.log("TEST");

        this.courses$ = db.list('courses').snapshotChanges()
            .map(actions => {
                return actions.map(action => ({
                    $key: action.key,
                    value: action.payload.val(),
                }))
            });

        this.courses$.subscribe(console.log);
    }

}

So the courses$ variable it shoul be an array of Observable (is it correct?). From what I know the Observable is an Object that emit events that can be subscribed. It will contain a list retrieved from Firebase DB.

This code section:

db.list('courses')

should simply create the binding with the courses node into my Firebase database (that contains itself a list of node) as a list. But I am not so sure if my interpretation is correct or if I am missing something.

Then on this binding is called the snapshotChanges() that should return an Observable.

Here I have the following doubts:

This Observable is related to a single element of the list of courses that I am retrieving or to the whole list of courses retrieved from the DB? (I think the second one but I am not so sure).
The exact type returned by the snapshotChanges() method seems to be Observable<SnapshotAction[]>. So what exactly means. It is an Observable that have an array of SnapshotAction as type. What exactly is and what exactly means?

Then there is this map() function:

.map(actions => {
    return actions.map(action => ({
        $key: action.key,
        value: action.payload.val(),
    }))
});

Here I am pretty stuck...I think that it is the more functional section. I think that it used to create my output each time that something changes into the observed courses$.

Reading the documentation it seems that the map() method creates a new array (infact I am creating an array) with the results of calling a provided function on every element in this array.

So it should mean that this is the function called on each element of array:

actions => {
    return actions.map(action => ({
        $key: action.key,
        value: action.payload.val(),
    }))
}

But what array? I think that it should be the previous Observable<SnapshotAction[]> returned by snapshotChanges() method.

I am absolutly not sure about this assertion....

So the idea is that every time that a change happens into the subscribed courses$ observable the map() method is executed on the new data... But I think that I am missing a lot of intermediate stuff

How exactly does this work?

where did you see that example? – Max Koretskyi Jan 04 '18 at 11:59 — Max Koretskyi, Jan 04 '18 at 11:59

score 3 · Accepted Answer · answered Jan 04 '18 at 12:11

According to the documentation,

AngularFire provides methods that stream data back as redux compatible actions.

and snapshotChanges in particular:

Returns an Observable of data as a synchronized array of AngularFireAction[].

So this method returns an observable of array of DB actions.

Regarding the map function, here

return actions.map(action => ({
    $key: action.key,
    value: action.payload.val(),
}))

the example simply iterates over the array of actions and retrieves the data associated with each action from action.payload.val(). map here is not an observable operator, its a method on an array.

score 1 · Answer 2 · edited Apr 16 '18 at 13:19

observer subscribes to an Observable. Then that observer reacts to whatever item or sequence of items the Observable emits. This pattern facilitates concurrent operations because it does not need to block while waiting for the Observable to emit objects, but instead it creates a sentry in the form of an observer that stands ready to react appropriately at whatever future time the Observable does so.

How exactly works this example that use Angularfire2 to retrieve a list from a Firebase DB?

2 Answers2