Angular version 14: map() inside pipe() to obtain a sub-array

Question

Currently i'm refactorizing a web app which consists on a website which shows the Golden State Warriors Roster and more specific info about the NBA basketball players if i click on the player's image.

I get the data located on a JSON Server/JSON Placeholder through Observables [roster-data.service.ts] and .subscribe() [players.component.ts] based on an interface created for each player [player.ts], which separates the player by five position, assigned as numbers on a enum created called enumPosition.ts .

First i'll show you the enum:

export enum Position {
    PointGuard = 1,
    ShootingGuard = 2,
    SmallForward = 3,
    PowerForward = 4,
    Center = 5,
}

Then the interface player.ts

import { Position } from "../models/enumPosition";

export class Player {

  constructor(
    public fullName: string,
    public shirtNumber: string,
    public position: number,
    public height: string,
    public weight: number,
    public points: number,
    public rebounds: number,
    public assists: number,
    public blocks: number,
    public steals: number,
    public imageFile: string,
    public imageDescrip: string
  ) {
    this.fullName = fullName;
    this.shirtNumber = shirtNumber;
    this.position = position;
    this.height = height;
    this.weight = weight;
    this.points = points;
    this.rebounds = rebounds;
    this.assists = assists;
    this.blocks = blocks;
    this.steals = steals;
    this.imageFile = imageFile;
    this.imageDescrip = imageDescrip;
  }
}

Next one would be the controller players.component.ts

import { Component, OnInit, isDevMode } from '@angular/core';
import { RosterDataService } from "../../services/roster-data.service";
import { Player } from "../../models/player";
import { imgRoute } from "../../services/img-route.service";

@Component({
  selector: 'app-players',
  templateUrl: './players.component.html',
  styleUrls: ['./players.component.scss'],
  providers: [RosterDataService]
})
export class PlayersComponent implements OnInit {
  public imageLocation:string;
  public pointGuards!: Player[];
  public shootingGuards!: Player[];
  public smallForwards!: Player[];
  public powerForwards!: Player[];
  public centers!: Player[];
  public getPlayers: Player[] = [];


  constructor(private _rosterDataService: RosterDataService) {
    this.imageLocation = imgRoute.path;
  }

  ngOnInit(): void {
    this.dev_SuscribeAllPointGuards();
  }

  dev_SuscribeAllPointGuards(){
    this._rosterDataService.jSON_Server_ReadPointGuards().subscribe(
      pointguards => {
        this.pointGuards = pointguards;
      }  
    );
  }
}

Up next i'll show you the service roster-data.service.ts

import { Injectable } from '@angular/core';
import { Player } from "../models/player";
import { environment } from "../../environments/environment";
import {HttpClient, HttpErrorResponse} from '@angular/common/http';
import {Observable, throwError} from 'rxjs';
import {catchError, map, filter} from 'rxjs/operators';
import { Position } from '../models/enumPosition';

@Injectable({
  providedIn: 'root'
})
export class RosterDataService {

  private readonly devURL = environment.url;

  public bases!: Player[];
  public escoltas!: Player[];
  public aleros!: Player[];
  public alaPivots!: Player[];
  public pivots!: Player[];
  public players!: Player[];
  
  constructor(private http: HttpClient) {
  }

  jSON_Server_ReadPointGuards():Observable<Player[]> {
    return this.http.get<Player[]>(this.devURL + "/roster_GoldenStateWarriors").pipe(
      map((jugones:Player[]) => { jugones.find(player => player.position === 1); return jugones;}),
      catchError(this.handleError)
    );
  }

  private handleError(err: HttpErrorResponse) {

      let errorMessage = '';
      if (err.error instanceof ErrorEvent) {

          errorMessage = `An error occurred: ${err.error.message}`;
      } else {

          errorMessage = `Server returned code: ${err.status}, error message is: ${err.message}`;
      }
      console.error(errorMessage);
      return throwError(() => errorMessage);
  }

}

My question would be: Which will be the way to obtain, for example, only the point guards (player.position == 1).

Thanks in advance!

Answer 1

In your example you use the find() method, which will return only the first object that matches the provided conditions. I'd suggest to use filter() instead, so that you get a sub-array with all matching items:

    jSON_Server_ReadPointGuards():Observable<Player[]> {
      return this.http.get<Player[]>(this.devURL + "/roster_GoldenStateWarriors").pipe(
        map((jugones:Player[]) => jugones.filter(player => player.position === 1)),
        catchError(this.handleError)
      );