Angularfire2 Firestore - Unwrap Observable into JSON Array

Question

I am trying to use an angular2 component to dynamically create a Tree view that will eventually drive the display of user-defined content. angular-tree-component is expecting an argument that conforms to a specific JSON structure.

My firestore setup is like this:

> Treeview(Collection
> ---Node1(Document)
> ------name: string
> ------id: number
> ---Node2(Document)
> ------name: string
> ------id: number

Sample Service - I'm importing a TreeModel interface from a file, the interface conforms to the expected JSON. So at the end of this, I'm able to return an Observable object named TreeData$ that I can iterate through with no problems using the async pipe myself. However, the angular 2 tree component does not like the observable.

export class TreeserveService {

    private treeCollectionRef: AngularFirestoreCollection<TreeModel>;
    public treeData$: Observable<TreeModel[]>;

  constructor(private afs: AngularFirestore) {
      this.treeCollectionRef = this.afs.collection<TreeModel>('Treeview')
      this.treeData$ = this.treeCollectionRef.valueChanges()
  }

  getTreeViewData(): Observable<TreeModel[]> {
    return this.treeData$
  }
  }

Sample Component- The template drives the creation of the tree view, and requires the argument 'tree' to be a specific JSON structure.

    @Component({
  selector: 'app-treeview',
  templateUrl: './treeview.component.html',
  styleUrls: ['./treeview.component.css'],
  template: '<tree-root [nodes]="tree"></tree-root>'

}) 
export class Treeview implements OnInit {

  public tree: Observable<TreeModel[]>;

  constructor(private Treeserve: TreeserveService) {
tree = this.Treeserve.TreeData$

  }
  ngOnInit() {


  }

I'm starting out trying to be VERY basic about this, and just get the 2 Nodes from my firestore database to appear.

Things I have tried:

I tried digging into the actual tree component to see if I could add an 'async' pipe to do the unwrapping. I actually got the error to go away, but nothing was showing up.
I have looked into .subscribe() .map() .flatmap() and a whole slew of RJXS operators. Almost all of the information I have found has pertained to either http.get, or the older Firebase model (that had some sort of list function).
I have looked into using something other than ValueChange() in the AFS call, but I'm not sure if I need more metadata yet.

I'm hoping there is a .map() solution using a syntax I haven't figured out yet. It would be awesome if I could use some sort of 'ifFor' statement to iterate through the observable, and map the ID and Name to the correct key-value pair in an object or array that the tree component could read.

This is the error I get in console:

NgFor only supports binding to Iterables such as Arrays.

When I do a console.log in the service for treeData$ or on this.tree in the component I get something like this:

Observable {_isScalar: false, source: Observable, operator: MapOperator}
operator
:
MapOperator
project
:
ƒ (actions)
arguments
:
(...)
caller
:
(...)
length
:
1
name
:
""
prototype
:
{constructor: ƒ}
__proto__
:
ƒ ()
[[FunctionLocation]]
:
collection.js:35
[[Scopes]]
:
Scopes[3]
thisArg
:
undefined
__proto__
:
Object
source
:
Observable {_isScalar: false, source: Observable, operator: MapOperator}
_isScalar
:
false
__proto__
:
Object

Rusty Shackleford Rusty Shackleford · Accepted Answer · 2017-12-04T01:50:24

I eventually came up with a solution to this specific issue. I needed to subscribe to the observable and assign it to an array. Now when I add a new document in Firestore, a new item appears in the list.

Next thing I need to tackle is how to do the nested children from Firestore.

template: '<tree-root [nodes]="treeData"></tree-root>',    
public treeData: TreeModel[] 

    this.Treeserve.getTreeViewData()
              .subscribe(nodes => {
                this.treeData = nodes as TreeModel[]
                console.log(this.treeData)
              })
        }

Angularfire2 Firestore - Unwrap Observable into JSON Array

1 Answers