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:

1. 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).

2. 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?

Answer 1

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.