Filtrowanie danych Observable w Angularze RXJS

Question

Siema,

mam pewien duży problem. Stworzyłem bazę danych z tabelą Pet. W tej tabeli mam psy i koty. Mam tam też kolumnę species, dla rozróżnienia czy obiekt to kot, czy pies.

 

Teraz chciałbym zrobić, żeby wyświetlały się tylko psy. I tutaj pojawia się problem.

Serwis, komunikujący się z backendem

export class PetServiceService {

  private url = 'http://localhost:5000/api/pet';

  constructor(private http: HttpClient) { }

  getPets(): Observable<Pet[]>{
    return this.http.get<Pet[]>(this.url);
  }
}

 

HTML


<div class="card m-2 hover-overlay" style="width: 15rem;" *ngFor="let pet of pets | async" [routerLink]="['/pet-details', pet.id]">
        <img [src]="pet.photo" class="card-img-top" alt="dog" style="height: 160px;">
        <div class="card-body bg-warning">
          <p class="card-text text-center h5" id="petName">{{pet.name}}</p>
        </div>
      </div>

 

 

TypeScript



export class DogsToAdoptListComponent implements OnInit {

  pets: Observable<Pet[]>;
  
  constructor(private http: PetServiceService) { }

  ngOnInit() { 
    this.pets = this.http.getDogs().pipe(
      map(dogs => dogs.filter(dog => dog.species === 'Pies'))
    );
  }
}

 

Ogólnie jestem w stanie wyświetlić wszystkie zwierzęta i to działa. Ale gdy staram się skomponować kod, który wyświetli mi tylko psy - pojawia się problem

this.pets = this.http.getDogs().pipe(
      map(dogs => dogs.filter(dog => dog.species === 'Pies'))
    );

Sprawdziłem, że to rozwiązanie zwraca mi pustą listę.

 

Czy ktoś wie dlaczego? I jak to naprawić? Kombinuję już na wszelkie sposoby i już nie wiem, co jest z tym nie tak. Help

Comments

Pytanie co przychodzi w tym strumieniu Observable? Nie powinieneś zastosować operatora filter na poziomie pipe, w miejsce map?

A druga, najważniejsza wg mnie sprawa - jaki jest sens pobierania więcej danych w backendu niż potrzebujesz? Dodaj w endpoincie np. opcjonalny parametr po którym filtrowałbyś wg wskazanych kategorii i od razu z bazy pobierz tylko tyle, ile potrzeba...

---

Dzięki. Zrobiłem tak, jak napisałeś z endpointem. Teraz wszystko działa. Dziękuję. Myślałem nad tym rozwiązaniem wcześniej, ale nie mogłem skleić funkcji. Teraz już wszystko śmiga. Dzięki