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

Question

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:

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?

Harif Velarde · Accepted Answer · 2020-09-10 19:39:45Z

1

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.

edited Sep 10, 2020 at 19:39

answered Sep 9, 2020 at 22:05

Harif Velarde

7535 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

AndreaNobili Over a year ago

In my case I have not a type like in the example that use Item. It is a generic object representing a JSON

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related