Firebase Cloud Firestore noSQL

В базе данных собраны пользователи, вопросы и ответы. см. ниже

Users
------
firstName
lastName

Questions
-------
date
question

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

Пример использования: получить ответы пользователей и вопрос на эти ответы. Показать вопрос и ответ

мой код:

    //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.info(data);
      console.info(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.info(ref);
            return ref;
          });   

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

2 вопроса:

  1. Это лучший способ? Он обращается к серверу, чтобы получить вопрос для каждого ответа. Кажется болтливым.
  2. Все же удается получить данные, хотя и болтливые, как теперь их отобразить?

Спасибо, я новичок в noSQL и Firebase.

"Кажется болтливым". немного расплывчато. Если вас беспокоит производительность, я рекомендую ее измерить. В целом, я считаю, что эти типы запросов намного более производительны, чем ожидают разработчики.

Frank van Puffelen 07.06.2018 23:20
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
1
57
1

Ответы 1

2 - как отобразить? "показать это" где? Во фронтенде ~?

Если вы используете AngularFire, вы можете попробовать:

в .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
});

в .html

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

(проверено)

Если вы используете Observable, вы можете попробовать:

в .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();

в .html

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

(полное тестирование не проводилось)

Другие вопросы по теме