Optimizing data consumption – filter operators
Our task of creating a typeahead type search
field is complete, but we can make this functionality more efficient from the point of view of consuming HTTP requests. Here, in our case, if the user types just one letter, we have already started the search for information, but just one letter still results in a very open list.
It would be more interesting for our application to start looking for exercises from the third letter that the user types onward, and we can make the following modification for this behavior:
public exercises$ = this.entryForm.valueChanges.pipe( map((model) => model?.exercise ?? ''), filter((exercise) => exercise.length >= 3), switchMap((exercise) => this.exerciseService.getExercises(exercise)) );
Here, we start using one of the most versatile features of RxJS, which is chaining operators for a certain action. We always need to keep in mind that...