How to use Observable.Zip with angularfire2?

Question

I'm using Angular 5 and angularfire2 to work with Firebase. I have an array of strings which represent paths into firebase. What I'm currently doing is this:

const pathList: string[] = ['path1', 'path2', 'path3'];
const observableList     = [];
pathList.map((location: string[]) => {
    observableList.push(this.db.object(`path_to_something/${location}).valueChanges());
});

const combined = zip(observableList);
combined.subscribe((values: any[]) => {
    console.log('DATA FROM ZIP', values);
}, err => {
    console.log('DATA FROM ZIP ERROR', err);
});

That's what I've been trying but, the Observables doesn't seem to trigger. Any result on the console is displayed. Any idea on how this could work.

I tried with forkJoin and nothing as well. But I tried with combineList and it works. The issue with that is, I have to use zip

martin martin · Accepted Answer · 2018-01-25T07:19:31

If the same Rx chain worked with combineLatest it should work with zip as well. If it doesn't emit anything try unwrapping the array of Observables:

const combined = zip(...observableList);

You can try it with the following demo and see that if you pass the array as is it won't emit anything:

http://jsbin.com/davadol/3/edit?js,console

const a = Observable.of(1);
const b = Observable.of(2);
const c = Observable.of(3);

Observable.zip([a, b, c]).subscribe(console.log);

But if you unwrap the array it works:

Observable.zip(...[a, b, c]).subscribe(console.log);

To be honest I'm surprised it doesn't work with the array because by looking at the typings I think it should, see https://github.com/ReactiveX/rxjs/blob/5.5.6/src/operators/zip.ts#L26. This should be the same use-case like with combineLatest and forkJoin where it works. To my surprised I recently found out that it doesn't work with Observable.concat either.

How to use Observable.Zip with angularfire2?

1 Answers