Firebase Cloud Firestore noSQL

Question

The database has a collection of users, questions and answers. see below

Users
------
firstName
lastName

Questions
-------
date
question

Answers
-------
date
answer
questionId
userId

Use case: get a users answers and the question to those answers. Display the question and answer

my code:

    //User Questions with Answers
this.db.collection('Answers', ref => ref.where('userId', '==', userId) ).snapshotChanges()
  .subscribe(data => {
    return data.map(a => {
      const data = a.payload.doc.data();
      console.log(data);
      console.log(data.questionId);
      //qa.answers.push(data);

      //Get each question from the answer now
      // bummer that this is a seperate request, very chatty
      var question = this.db.collection('Questions')
        .doc(data.questionId).valueChanges()
          .subscribe(ref => {

            console.log(ref);
            return ref;
          });   

      return {data, question};
    });
  });

2 questions:

1. Is this the best way? It makes a call to the server to get the question for every answer. Seems chatty.
2. It does manage to get the data, although chatty, now how do I display it?

Thanks, I'm new to noSQL and Firebase.

Answer 1

2 - how display? "display it" where? In frontend~?

If using AngularFire, you can try:

in .ts

answersCol : AngularFirestoreCollection<Answers>;
answersObersArray: Observable<Answers[]>;
answersArray: Array<Answers>;

this.answersCol  = this.db.collection('survey/' + userId);
this.answersObersArray = this.answersCol .valueChanges();

this.answersObersArray .subscribe(answers => {
   this.answersArray = answers ;//--Working with arrays
});

in .html

<table class="table table-bordered">
  <tbody *ngFor="let answer of answersArray ">
         <tr style="font-weight:bold">
           <td>{{ answer  }}</td>
          </tr>
  </tbody>
</table>

(tested)

If using Observable, you can try:

in .ts

var answersCol = this.db.collection('answers/' + userId');//Check ur struct
answersObservArray: Observable<Answers[]>; //If you have a Answers class

this.answersObservArray= this.answersCol.valueChanges();

in .html

<h4 class="title"> {{ (answersObservArray| async)}}</h4>

(no full tested)