Firestore: Array of references within a document into an object with array of objects (AngularFire)

Question

I have a collection, where each single document have an array of references.

The structure in Firestore is like this:

collection1
   doc1
   doc2
   doc3
       name: string
       ...
       refs: Array
           collection2/x786123nd...
           collection2/z1237683s...
           ...

I want to convert that into:

[
   {<doc1 as object>},
   {<doc2 as object},
   { name: "Document 3", refsResult: 
     [
       {<object here mapped from reference>},
       {<object here mapped from reference>},
     ]
   }

]

Long story short, from firebase I need to get an output of a list of object where each object has a list of objects instead of references.

THE FOLLOWING SNIPPET IS NOT WORKING

I am trying to do it at service level in Angular using RxJS to transform the output, something like this:

return this.afs.collection('collection1')
            .valueChanges()
            .pipe(
                switchMap(objects => from(objects).pipe(
                    switchMap(obj => from(obj.refs).pipe(
                        switchMap(ref => ref.get()),
                        map(r => ({ ...obj, refsResult: r.data() })),
                        tap(obj => console.log('OBJ', obj)),
                    )),
                )),
                tap(objects => console.log(objects))
            );

But it seems that I only receive one object instead of a list of objects with 2. Also, it seems that the refsResult is also a single object instead of an array. I am sure I am using the switchMaps wrong, probably they are cancelling the others results or similar.

I would like to keep the solution within the chain of rxjs operators.

EDIT 1 I got it working in a hacky way, I am just sharing it here in order to give more context, and see if we can find a way to do it with RxJS.

return this.afs.collection('collection1')
            .valueChanges()
            .pipe(
                tap(objects => {
                    objects.forEach(object => {
                        object.refsResult = [];
                        object.refs.forEach(ref => {
                            ref.get().then(d => object.refsResult.push(d.data()));
                        })
                    })
                }),
                tap(programs => console.log(programs))
            );

The code above works but not very well, since first return the collection and then, mutates the objects to inject the items within the array. Hopefully it helps.

Help is very appreciated! :)

Answer 1

You can use combineLatest to create a single observable that emits an array of data.

In your case, we can use it twice in a nested way:

• to handle each object in collection
• to handle each ref in refs array for each object

The result is a single observable that emits the full collection of objects, each with their full collection of ref result data. You then only need a single switchMap to handle subscribing to this single observable:

  return this.afs.collection('collection1').valueChanges().pipe(
      switchMap(objects => combineLatest(
          objects.map(obj => combineLatest(
                  obj.refs.map(ref => from(ref.get()).pipe(map(r => r.data())))
              ).pipe(
                  map(refsResult => ({ ...obj, refsResult }))
              )
          ))
      ))
  );

For readability, I'd probably create a separate function:

function appendRefData(obj) {
    return combineLatest(
        obj.refs.map(ref => ref.get().pipe(map(r => r.data())))
    ).pipe(
        map(refsResult => ({ ...obj, refsResult }))
    );
}

return this.afs.collection('collection1').valueChanges().pipe(
    switchMap(objects => combineLatest(objects.map(appendRefData)))
);