Filtre Simple sur le tableau de RXJS Observables

Je suis en train de créer mon projet avec Angular2 et les développeurs semblent recommander RXJS Observables au lieu de Promesses.

J'ai réalisé, pour récupérer une liste d'éléments (épopées) à partir du serveur.
Mais comment puis-je filtrer les elments en utilisant par exemple un id?

Le code suivant est une extraction à partir de mon application et montre maintenant la finale de la solution de travail. Espérons que cela aide quelqu'un.

@Injectable()
export class EpicService {
private url = CONFIG.SERVER + '/app/';  //URL to web API
constructor(private http:Http) {}
private extractData(res:Response) {
let body = res.json();
return body;
}
getEpics():Observable<Epic[]> {
return this.http.get(this.url + "getEpics")
.map(this.extractData)
.catch(this.handleError);
}
getEpic(id:string): Observable<Epic> {
return this.getEpics()
.map(epics => epics.filter(epic => epic.id === id)[0]);
}
}
export class EpicComponent {
errorMessage:string;
epics:Epic[];
epic:Epic;
constructor(
private requirementService:EpicService) {
}
getEpics() {
this.requirementService.getEpics()
.subscribe(
epics => this.epics = epics,
error => this.errorMessage = <any>error);
}
//actually this should be eventually in another component
getEpic(id:string) {
this.requirementService.getEpic(id)
.subscribe(
epic => this.epic = epic,
error => this.errorMessage = <any>error);
}
}
export class Epic {
id: string;
name: string;
}

Je vous remercie d'avance pour votre aide.

  • vous devriez avoir quitté la question d'origine comme c'est, de cette façon, on ne saura jamais ce "pas" à faire
InformationsquelleAutor Johannes | 2016-06-23
  1. 59

    Vous aurez envie de filtrer le tableau réel et non observables enroulé autour d'elle.
    Ainsi, vous aurez la carte le contenu de l'Observable (qui est un Epic[]) à un filtrée Epic.

    getEpic(id: string): Observable<Epic> {
return this.getEpics()
.map(epics => epics.filter(epic => epic.id === id)[0]);
}

    Puis, ensuite, vous pouvez subscribe à getEpic et faire ce que vous voulez avec elle.

    • Semble simple, mais: Erreur:(33, 42) TS2365: l'Opérateur '===' ne peut pas être appliquée de type 'string' et 'nombre'. Je mettrai à jour la question, pour montrer l'ensemble de la composante et de la relation de service.
    • Eh bien, si c'est cela, alors vous pouvez simplement convertir de la chaîne de nombre ou de numéro de chaîne 🙂
    InformationsquelleAutor Luka Jacobowitz
  2. 27

    Vous pouvez faire cela en utilisant la flatMap et filter méthodes de Observable au lieu de la JS matrice méthode de filtre dans map. Quelque chose comme:

    this.getEpics() 
.flatMap((data) => data.epics) //[{id: 1}, {id: 4}, {id: 3}, ..., {id: N}]
.filter((epic) => epic.id === id) //checks {id: 1}, then {id: 2}, etc
.subscribe((result) => ...); //do something epic!!!

    flatMap fournira singulier indices pour le filtrage et puis vous pouvez aller sur avec tout ce qui se passe ensuite avec les résultats.

    Si la Machine renvoie une erreur indiquant que vous ne pouvez pas comparer une chaîne et un certain nombre, quelle que soit votre utilisation de == dans le filtre, il suffit d'ajouter une + avant epic.id dans le filtre, par l'angle de docs:

        .flatMap(...)
.filter((epic) => +epic.id === id) //checks {id: 1}, then {id: 2}, etc
.subscribe(...)

    Exemple:

    https://stackblitz.com/edit/angular-9ehje5?file=src%2Fapp%2Fapp.component.ts

    • C'est beaucoup plus propre que la accepté de répondre et fait pleinement usage de Rx. La bonne façon d'effectuer cette opération consiste à utiliser flatMap comme l'auteur l'a souligné.
    • Si les épopées ist un tableau (comme vous le suggérez), on ne peut pas flatMap à data.epics. Et vous aussi ne peut pas filtrer le tableau comme vous l'avez écrit.
    • Je dirais que vous devriez essayer le code d'abord, puis commentaire - stackblitz.com/edit/...
    • Oui, je l'ai copier ton commentaire de la part de soi en tant qu'entrée. Votre commentaire pour la méthode getEpics() ici sur devraient DONC être: // { epics: [{id: 1}, {id: 2}, {id: 3}, {id: 4}, {id: 5}] } et pas // [{id: 1}, {id: 4}, {id: 3}, ..., {id: N}] comme dans le Stackblitz exemple.. qui me confond, merci. Devraient ai regardé int la Stackblitz exemple, de trop 🙂
    • J'ai déplacé le commentaire d'une ligne vers le bas
    InformationsquelleAutor mtpultz
  3. 1

    réponse originale à cette question avec un correctif:
    Observables sont paresseux. Vous devez appeler subscribe de dire à un observable à l'envoi de sa demande.

      getEpic(id:number) {
return this.getEpics()
.filter(epic => epic.id === id)
.subscribe(x=>...);
}

    Mise à jour Rxjs 6:

    import {filter} from 'rxjs/operators';
getEpic(id:number) {
return this.getEpics()
.pipe(filter(epic => epic.id === id))
.subscribe(x=>...);
}
    • Le type de retour de souscrire un Abonnement, qui met en œuvre ISubscription. Les deux n'ont pas une méthode de filtre.
    • dans la question d'origine this.getEpics() retourne observables d'un Array. Donc, filter est une méthode de Array
    • Vous êtes de droite. Juste dans votre réponse, vous enchaînez le filtre après la méthode subscribe, qui n'a pas une méthode de filtre, donc mon commentaire
    InformationsquelleAutor Andrei Zhytkevich
  4. 0

    Vous devez vous inscrire sur Observables pour obtenir les données, depuis http appels asynchrone en JavaScript.

    getEpic(id: number, callback: (epic: Epic) => void) {
this.getEpics().subscribe(
epics: Array<Epic> => {
let epic: Epic = epics.filter(epic => epic.id === id)[0];
callback(epic);
}
);
}

    Vous pouvez appeler cette méthode, puis comme ceci:

    this.someService.getEpic(epicId, (epic: Epic) => {
//do something with it
});
    InformationsquelleAutor rinukkusu