Rxjs map and filter array- Return single object instead of array of one?

Question

I have a method on my service that gets all Templates, and returns an Observable array of Template objects. I am attempting to add a new method to my service that gets the array of Templates, but filters it to get a specific template by name, in an array.

Is there a way to get this to just return a single Template Observable, rather than an Observable Template array with one item? I am still so new to rxjs syntax that I don't understand how to use things like reduce.

Here's my working method to get all templates.

 getAllTemplates(): Observable<Template[]>{
    const uri = this.baseService.rootTemplatesUri;
    return this.http.get<Template[]>(uri)
      .pipe(
        catchError((error: HttpErrorResponse) => { return throwError(error); })
      );
  }

Here's my attempt that is filtering by name, which returns an array with one element if there's a matching name:

getTemplateByName(name:string):Observable<Template[]>{
    const uri = this.baseService.rootTemplatesUri;
    return this.http.get<Template[]>(uri)
      .pipe(
        map(templates => {
          return templates.filter(template => {
            return template.Name === name;
          })
        }),
       catchError((error: HttpErrorResponse) => { return throwError(error); })
     );

  }

Is there a way to get a single Observable returned by filtering this?

Answer 1

When the map RxJS operator is used, the returned observable has the type returned inside the map operator. The JavaScript filter method returns a new array as stated in its documentation . That's why your getTemplateByName method returns an observable of Template[] elements.

If you need to make the getTemplateByName method return an observable of Template elements, you need to return a single Template element inside your map operator. The JavaScript find method does this as stated in Array​.prototype​.find() . Just use it to achieve the desired behavior.

getTemplateByName(name:string):Observable<Template>{
    const uri = this.baseService.rootTemplatesUri;
    return this.http.get<Template[]>(uri)
      .pipe(
        map(templates => {
          return templates.find(template => {
            return template.Name === name;
          })
        }),
       catchError((error: HttpErrorResponse) => { return throwError(error); })
     );

  }