DEV Community

Discussion on: Async material autocomplete in Angular

Collapse
 
federicopenaranda profile image
Federico Peñaranda

I was testing the field, and if you put a filter so there are no resulting countries (like "xas" of something else) it's showing a 404 error in the request and shows nothing in the list, maybe you can improve it by catching the error in the service?, something like this:

getByName(countryName: string): Observable<string[]> {
return this.http.get<Country[]>(`https://restcountries.eu/rest/v2/name/${countryName}`)
    .pipe(
    map(countryList => countryList.map( ({ name }) => name )),
    catchError( (err) => {
        if (err.error.status === 404) {
            return of([`--- No results for: ${countryName} ---`]);
        }
    })
    );
}
Enter fullscreen mode Exit fullscreen mode

The result would be like this:
Empty list

Collapse
 
tomwebwalker profile image
Tomasz Flis

Good point. I didn't focus on error handling, but definitely on production; it should be.