javascript - RxJs: http.get λαμβάνει έναν πίνακα, αλλά θέλω ο συνδρομητής να λάβει μεμονωμένα στοιχεία


Γράφω μια εφαρμογή Angular2 (RC5) που χρησιμοποιεί ένα RESTful API backend του NodeJS.

Μία από τις διαδρομές του backend επιστρέφει έναν πίνακα με 'Υποψηφίους':

exports.list = function (req, res, next) {
  const sort = req.query.sort || null
  const fields = req.query.fields || null

  let query = Candidate.find()

  if (sort !== null) {
    query.sort(sort.replace(',', ' '))
  }

  if (fields !== null) {
    query.select(Candidate.reduceFields(fields))
  }

  query
    .then(function (candidates) {
      res.send(candidates)
    })
    .catch(next)
}

Λαμβάνω αυτό στο frontend σε μια υπηρεσία:

  getCandidates() {
    return this.http
      .get(`http://localhost:3500/api/v1/proboard/candidates`)
      .map(function (res) {
         console.log("First:" + res.json());
         return res.json();
      })
   };  

Στη συνέχεια, ο ελεγκτής μου εγγράφεται σε αυτό το παρατηρήσιμο:

ngOnInit() {
    this.subscription = this.candidateService.getCandidates()
      .subscribe(
        (candidates: Candidate[]) => {
          console.debug("Got:" + JSON.stringify(candidates));
          this.candidates = candidates;
         }
      );
  }

Αυτό λειτουργεί, αλλά όχι με τον τρόπο που περίμενα (ή ήθελα;). Ο ελεγκτής λαμβάνει έναν πίνακα αντικειμένων από το ρεύμα, όχι μεμονωμένα στοιχεία του πίνακα.

Για παράδειγμα, αν υπήρχαν 20 υποψήφιοι που επιστράφηκαν από το backend, ο ελεγκτής θα καταγράψει ότι ο κώδικας συνδρομής κλήθηκε μία φορά, και θα λάβει έναν πίνακα με 20 στοιχεία.

Αυτό που ήθελα ήταν ο κωδικός συνδρομής του ελεγκτή να κληθεί 20 φορές, κάθε φορά με ένα μόνο στοιχείο, όχι με έναν πίνακα με 1 στοιχείο.

Μου λείπει κάτι όσον αφορά την κατανόησή μου για το πώς λειτουργεί το RxJs. Πώς θα πρέπει να αναδιατάξω αυτόν τον κώδικα ώστε ο ελεγκτής να λαμβάνει ένα στοιχείο κάθε φορά αντί ολόκληρο τον πίνακα ταυτόχρονα;

Το κίνητρό μου για να θέλω αυτό είναι επειδή θέλω, τελικά, να μην λαμβάνω μόνο τη λίστα των υποψηφίων όπως είναι τώρα, αλλά και οποιεσδήποτε αλλαγές στη λίστα ενώ ο ελεγκτής είναι ενεργός.

Απάντηση #1

Αντιμετώπισα μια πολύ παρόμοια απαίτηση στην εφαρμογή μου.

Αλλαγή :

this.subscription = this.candidateService.getCandidates()
                        .subscribe(...);

Σε

this.subscription = this.candidateService.getCandidates()
                        .switchMap(candidates => Observable.from(candidates))
                        .subscribe(...);

Απάντηση #2

Το back-end σας στέλνει έναν πίνακα δεδομένων και επομένως το front-end observable σας εκπέμπει τον ίδιο πίνακα.

Αν θέλετε το παρατηρήσιμο του front-end σας να εκδίδει μεμονωμένα στοιχεία του πίνακα, πρέπει να το δημιουργήσετε χρησιμοποιώντας κατάλληλους τελεστές αντί απλώς να χρησιμοποιείτε τον τελεστή map. Δείτε τον τελεστή from.