RxJs 'take' operator after 'map' operator doesn't work

Is it possible to take only a certain number of elements of an http call after I modify the original response with a 'map' operator?

For example, let's say I have this very simple http call for the Rick And Morty API:

Simple two interfaces:

export interface Character {
id: number;
name: string;
status: string;
species: string;
type: string;
gender: string;
origin: Origin;
location: Location;
image: string;
episode: string[];
url: string;
created: string;
}

export interface RickAndMortyResponse {
info: Info;
results: Character[];
}


Now if I do the call, it's mandatory to do it with the 'RickAndMortyResponse', but in my final response I just care about the first two elements of the 'results' response, so the logic thing to do would be this:

export class RickAndMortyService {
private http = inject(HttpClient);

characters$ = this.http
.get<RickAndMortyResponse>('https://rickandmortyapi.com/api/character')
.pipe(
map((response) => response.results),
take(2)
);
}


However, this stills retrieving all the data of 'results', I presumed It's because the 'take' operator affects the 'RickAndMortyResponse' and not the 'results' array.

So to solve this, the only way I see is to do a slice on the map operator:

characters$ = this.http
.get<RickAndMortyResponse>('https://rickandmortyapi.com/api/character')
.pipe(map((response) => response.results.slice(0, 2)));


So, is there any way to actually use operators like 'take' after I modified the original stream of data using 'map'?

Continue reading...