I have a Firebase Firestore with "Components" as a root collection. Each document (a "Component") in the collection may have an array called "children", with each item in the array being an "id" of another component, essentially, a one-to-many relationship. Since every child is also a component it may also have its own children and so forth.
1_Parent (document)
│ name: 'Parent'
│ id: '1_Parent'
└─children (array)
├─1.1_Child_one
└─1.2_Child_two
1.1_Child_one (document)
name: 'Child One'
id: '1.1_Child_one'
1.2_Child_two (document)
│ name: 'Child Two'
│ id: '1.2_Child_two'
└─children (array)
├─1.2.1_Grandchild_one
└─1.2.2_Grandchild_two
1.2.1_Grandchild_one (document)
name: 'Grandchild One'
id: '1.2.1_Grandchild_one'
1.2.2_Grandchild_two (document)
name: 'Grandchild Two'
id: '1.2.2_Grandchild_two'
In my code, I want to create an object for each component and if it has a children array then each of the id in the array is replaced by a fully fledged object retrieved from Firestore.
The output object tree should look like this
1_Parent
│ name: 'Parent'
│ id: '1_Parent'
└─children
├─1.1_Child_one
│ name: 'Child One'
│ id: '1.1_Child_one'
└─1.2_Child_two
│ name: 'Child Two'
│ id: '1.2_Child_two'
└─children
├─1.2.1_grandhild_one
│ name: 'Grandchild One'
│ id: '1.2.1_grandhild_one'
└─1.2.2_grandhild_two
name: 'Grandchild Two'
id: '1.2.2_grandhild_two'
The output object as JSON should look like this
{
"name": "Parent",
"id": "1_Parent",
"children": [
{
"name": "Child One",
"id": "1.1_Child_one"
},
{
"name": "Child Two",
"id": "1.2_Child_two",
"children": [
{
"name": "Grandchild One",
"id": "1.2.1_Grandchild_one"
},
{
"name": "Grandchild Two",
"id": "1.2.2_Grandchild_two"
}
]
}
]
}
It is obvious, we need recursion here, but I am at complete loss about how to create a recursive function using RxJS. I would appreciate some tips or example code for allowing to do so.
Note, I am using this in an Angular project and I am using AngularFire to access Firebase-Firestore.
Recursion in RxJS is best tackled with the use of the expand operator. You provide it with a projection function that returns an Observable, that, on notification, calls the projection function again with the emitted value. It does this for as long as your inner Observable is not emitting EMPTY or complete.
While it does that, every notification is also forwarded to the subscribers of expand, unlike with a traditional recursion where you'll only get the result at the very end.
From the official docs on expand:
Recursively projects each source value to an Observable which is merged in the output Observable.
Let's look at your example. Without RxJS, if we had a synchronous datasource that gave us each child of a node (let's call it getChildById), the function could look like this:
function createFamilyTree(node) {
node.children = node.childrenIds.map(childId =>
createFamilyTree(
getChildById(childId)
)
);
return node;
}
Now, we'll translate it to RxJS with the use of the expand operator:
parentDataSource$.pipe(
map(parent => ({node: parent})),
expand(({node}) => // expand is called for every node recursively
(i.e. the parent and each child, then their children and so on)
!node ? EMPTY : // if there is no node, end the recursion
from(node.childrenIds) // we'll convert the array of children
ids to an observable stream
.pipe(
mergeMap(childId => getChildById(childId) // and get the child for
the given id
.pipe(
map(child => ({node: child, parent: node}))) // map it, so we have
the reference to the
parent later on
)
)
),
// we'll get a bunch of notifications, but only want the "root",
that's why we use reduce:
reduce((acc, {node, parent}) =>
!parent ?
node : // if we have no parent, that's the root node and we return it
parent.children.push(node) && acc // otherwise, we'll add children
)
);
The used operators are explained in detail on the official RxJS documentation page: from, expand, reduce
EDIT: A clean and tested version of the above code can be found here: https://stackblitz.com/edit/rxjs-vzxhqf?devtoolsheight=60