CODEWITHSUNDEEP
angularfirebasegoogle-cloud-firestoreangularfire2
AndreaNobili
AndreaNobili

Reputation: 42957

How can I correctly retrieve the array of FireStore objects from a collection in Angular?

In my application, until now, I retrieved data that have to be shown into a table from a mocked array of objects (where each object represents a row of my table).

Originally I simply had something like this into my component TypeScript code:

orders: any[];

then into my ngOnInit() method I done:

this.ordersService.getAllOrders().then(orders => {
    this.orders = orders;
    console.log("RETRIEVED ORDERS: ", orders);
    this.loading = false;
});

where the getAllOrders() method of my service simply retrieved data (the array) from a JSON file:

  getAllOrders() {
    return this.http.get<any>('assets/json_mock/ordini.json', {responseType: 'json'})
        .toPromise()
        .then(res => res.data)
        .then(data => { return data; });
  }

It works fine.

Now I am trying to retrieve this array of objects from FireStore database and I have some problem.

I have done in this way.

Into the ngOnInit() of my component class now I have:

   this.ordersService.getAllOrders().subscribe(ordersList => {
     console.log("RETRIEVED ordersList: ", ordersList);
     this.orders = ordersList;
     console.log("RETRIEVED ORDERS: ", this.orders);
     this.loading = false;
   });

Then into the service class the getAllOrders() is changed in this way:

getAllOrders(): Observable<any[]> {
    this.ordersList = this.db.collection('Orders').snapshotChanges();

    return this.ordersList;
}

It partially works because it semmes that retrieve something from FireStore (the connection works fine) and I think also my "query".

The problem is that into the subscribe() method of my component, these lines:

this.ordersService.getAllOrders().subscribe(ordersList => {
    console.log("RETRIEVED ordersList: ", ordersList);
    this.orders = ordersList;
    console.log("RETRIEVED ORDERS: ", this.orders);
    this.loading = false;
 });

it print in the Chrome console:

enter image description here

So I think that I have to extract my array in some way from this object. What am I missing? How can I do it?

Upvotes: 0

Views: 1378

Answers (1)

Harif Velarde
Harif Velarde

Reputation: 753

Firestore doesn't store JSON. It stores key/value pairs with strongly typed values, as it is mentioned at the official documentation:

"Using Map or Dictionary objects to represent your documents is often not very convenient, so Cloud Firestore supports writing documents with custom classes. Cloud Firestore converts the objects to supported data types."

Therefore, there is no direct way to get the results directly as a json object.

There is a service called AngularFirestoreCollection that is a wrapper around the native Firestore SDK's, at this document you can find useful examples about how to get data from firestore, for example:

import { Component } from '@angular/core';
import { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/firestore';
import { Observable } from 'rxjs';

export interface Item { name: string; }

@Component({
  selector: 'app-root',
  template: `
    <ul>
      <li *ngFor="let item of items | async">
        {{ item.name }}
      </li>
    </ul>
  `
})
export class AppComponent {
  private itemsCollection: AngularFirestoreCollection<Item>;
  items: Observable<Item[]>;
  constructor(private afs: AngularFirestore) {
    this.itemsCollection = afs.collection<Item>('items');
    this.items = this.itemsCollection.valueChanges();
  }
  addItem(item: Item) {
    this.itemsCollection.add(item);
  }
}

On the other hand, if you want to use directly the QuerySnapshot class, take a look at this thread.

Upvotes: 1

Related Questions