AngularFire - Push data from firestore collection query into an array

Question

I'm querying a Firestore collection an successfully retrieving the results. However, I'm using a sortable angular plugin that requires an array to sort.

The issue I have is that the items are being pushed into the array, but I cannot find a correct location to clear the array when new items come in. Without clearing the array, the results returned start to duplicate in the array.

Is someone able to help refactor the code below so that I can successfully push the collection results into the array and clear it in the correct spot please?

...
itemsArray = []
...

getData(){
    this.issueCollection = this.afs.collection<any>(`users/${user}/projects/${project}/issues`, ref => {
      return ref.orderBy('order');
    });
    this.issues = this.issueCollection.snapshotChanges().pipe(
      map(actions => actions.map(a => {
        const data = a.payload.doc.data();
        const id = a.payload.doc.id;

        this.itemsArray.push({ id, ...data });

        return { id, ...data };
      }))
    );
  }

HTML - How I need the HTML to display the results

<ul>
   <li *ngFor="let issue of itemsArr">
      {{ issue.issueName }}
   </li>
</ul>

Update - This seems to work

  getData(){
    this.issueCollection = this.afs.collection<any[]>(`users/${user}/projects/${project}/issues`, ref => {
      return ref.orderBy('issue_order');
    });
    this.issues = this.issueCollection.snapshotChanges().pipe(
      map(actions => {
      this.itemsArr = [];
      return actions.map(a => {

        const data = a.payload.doc.data();
        const id = a.payload.doc.id;


        this.itemsArr.push({ id, ...data });


        return { id, ...data };
      });
    }))
  }

Swoox · Answer 1 · 2018-12-11T10:56:29.640

0

What I would do is make it subcribe to the collection and do this:

getData(){
    this.issueCollection = this.afs.collection<any[]>(`users/${user}/projects/${project}/issues`, ref => {
      return ref.orderBy('order');
    });
    this.issues = this.issueCollection.snapshotChanges().pipe(
      map(actions => actions.map(a => {
            const data = a.payload.doc.data();
            const id = a.payload.doc.id;

            return { id, ...data };
        }))).subscribe((items: any[]) => {
          this.itemsArray = [];
          this.itemsArray = items;
       });
  }

This will allow you to empty the itemsArray and refill it. Instead of only pushing the array and never empty it.

edited Dec 11 '18 at 10:56

answered Dec 11 '18 at 10:27

Swoox

3,707
2
21
32

Thanks for the rapid response @Swoox! - I've copied your answer and I get a couple of errors. On the second ".map" I get "Property 'map' does not exist on type '{}'". The second error is on ".subscribe" - Property 'subscribe' does not exist on type 'OperatorFunction<{}, any>'. – Que Dec 11 '18 at 10:32
Thanks Swoox. Exact same error unfortunately. Just on the second map and subscribe. If I remove the code from subscribe onwards, the map error goes away. "Property 'map' does not exist on type '{}'" & "Property 'subscribe' does not exist on type 'OperatorFunction<{}, any>'." – Que Dec 11 '18 at 10:37
This is properly caused by `this.afs.collection` make it `this.afs.collection` or `subscribe((items: any) => {` should fix it. – Swoox Dec 11 '18 at 10:40
Still no luck...a bit baffed as to what could be causing those errors. If it helps, I'm on AngularFire 5 – Que Dec 11 '18 at 10:46
Using rxjs 5 or 6? If you use 6, use `import { map } from 'rxjs/operators';` – Swoox Dec 11 '18 at 10:50
rxjs 6.3.2 and I already have the map import for the original query :) – Que Dec 11 '18 at 10:53
I triple checked my code and I do `return { id, ...data }; }))).subscribe((items: any[]) => {` With 3x a `)` hmm shouldn't give this error but I guess that will do. All seen the floating `})) );` better to make it `})));` (my opinion) – Swoox Dec 11 '18 at 10:57
I've updated my post - You pointed me in a direction to try something. It works. Does the code look fine? – Que Dec 11 '18 at 11:01
Swoox - Thank you so much for your time and effort. I really appreciate people like you, so thank you a million. – Que Dec 11 '18 at 11:05
You are welcome. Same can be said from you very patience some people just rage at some mistakes lol. – Swoox Dec 11 '18 at 11:05

AngularFire - Push data from firestore collection query into an array

1 Answers1